08-06-15

HOW TO: EEN IMAGEMAP MAKEN.


Het gebruiken van een imagemap kan (vooral als blogger) onwijs handig zijn! In dit artikel leg ik uit wat een imagemap is, wat je er mee kunt doen en hoe je er op een simpele manier zelf één kunt maken. Ik hoop dat jullie er iets aan hebben.

Wat is een imagemap?
''Een image map is in HTML en XHTML de technologie die ervoor zorgt dat een afbeelding verschillende gehyperlinkte gebieden kan bevatten.'' Aldus Wikipedia. En dan nu in het normaal Nederlands haha; met behulp van HTML kun je er met een imagemap voor zorgen dat je zelf een gebied op een afbeelding kiest die je klikbaar wilt hebben die dan linkt naar een bepaalde website. Omdat het helemaal zelf maken van een imagemap nogal ingewikkeld is laat ik jullie vandaag zien hoe je er één maakt met behulp van een handig programma. Op één afbeelding kan je naar zoveel pagina's linken als je wilt. Een imagemap kan je dus eigenlijk voor van alles gebruiken! Je kan er een artikel interessanter mee maken, door bijvoorbeeld een artikel te maken over je favoriete nagellakjes en ieder lakje klikbaar te maken naar de website van het merk, maar je kan het ook verwerken in je lay-out. Als je (nog) niet zo goed bent met HTML kan je bijvoorbeeld socialmedia buttons maken met behulp van Photoshop en een imagemap!

Image Map

Hoe maak je een imagemap?
Stap 1: Kies een afbeelding die je wilt gaan gebruiken. Dat kan een foto zijn die je zelf gemaakt hebt  maar, je kunt ook iets maken/bewerken in Photoshop.
Stap 2: Vergroot/verklein de afbeelding op zo'n manier dat 'ie qua afmetingen precies past op de plek waar je hem wilt plaatsen.
Stap 3: Zorg voor de directe link van jouw afbeelding. Die kan je verkrijgen door je afbeelding eerst te uploaden op een website als Tinypic.com of Photobucket.com.
Stap 4: Kopieer de directe link en plak deze op de website van Image-maps.com.
Stap 5: Voor Windows: Klik met je rechtermuisknop op de afbeelding voor het menu. Voor Mac: Toets in ctrl en klik op de afbeelding voor het menu.
Stap 6: Kies in het menu voor 'Create Rect'. Nu kun je met behulp van een vierkantje aangeven welk deel van de afbeelding je klikbaar wilt maken.
Stap 7: Bij 'Map URL' plak je de website waarnaar je hier wilt linken. Je kunt er voor kiezen om het nog een titel te geven bij 'Title' deze tekst zie je staan als je staan als je er met je muis overheen gaat. De andere invulvakjes die er onderstaan zijn niet persé van toepassing, deze kun je dus leeg laten. Als je klaar bent klik je op 'Save' onderaan in het menu.
Stap 8: Herhaal stap 5 & 6 tot dat je alle plekken hebt aangegeven die je klikbaar wilt maken.
Stap 9: Kies in het menu voor 'Get Code', klik op 'HTML Code' en kopieer de code die onderaan staat.
Stap 10: Je imagemap is nu klaar! Je kunt de HTML code plakken in je artikelen of in je lay-out.

Als voorbeeld heb ik een imagemap gemaakt om je een beetje een idee te geven. Ieder madeliefje in de afbeelding hierboven verwijst naar een socialmedia account waarop mijn blog te vinden is :)

Bekijk je dit artikel op je telefoon? Dan doet de imagemap het waarschijnlijk niet. Klik onderaan mijn blog op 'internetversie weergeven', dan werkt 'ie wel! 

5 opmerkingen:

  1. Erg handig deze tip! Ga het van de week uitproberen!

    BeantwoordenVerwijderen
  2. Kun je ook doormiddel van zoiets een afbeelding hebben waar je ergens op klikt zodat er een andere afbeelding komt? Een soort interactieve afbeelding dus?

    BeantwoordenVerwijderen
    Reacties
    1. Ja dat is zeker mogelijk! Maar helaas heb ik op dit moment nog niet uitgevonden hoe je dat precies kunt doen. Als ik het weet zal ik daar zeker een artikel over schrijven :)

      Verwijderen
  3. Handig om te weten, bedankt voor de tip en je goede uitleg

    BeantwoordenVerwijderen