Een Client-Side Image Map Maken

In dit artikel leer je hoe je een client-side image map kunt maken. Een image map is een plaatje dat bestaat uit meerdere delen die ieder een bepaalde functie uitvoeren wanneer erop geklikt wordt. Zo kun je bezoekers doorsturen naar een bepaalde pagina (bijvoorbeeld bij plaatjes van landkaarten), of je kunt een image map gebruiken voor de navigatie binnen je site. Image maps worden dan ook vaak gebruikt op het web.

De meeste moderne browsers ondersteunen image maps.
Hierdoor is het niet echt meer nodig om server-side image maps te maken, wat ingewikkelder is en waarbij je met CGI scripts moet werken.

Voorbeeld van een image map

Hieronder zie je een voorbeeld van een image map.
Ga met de muis maar eens over de verschillende landen op de kaart en kijk links onderin naar de statusbalk van je browser.
Je ziet dat de drie delen op de kaart naar verschillende websites op het web linken.
Aan het eind van dit artikel kun je zelf ook zulke image maps maken.

(Plaatje afkomstig van: 321Clipart.com

Wat je nodig hebt

Voor het maken van een client side image map heb je het volgende nodig:

• een programma voor het maken van de map
• een HTML editor
• een browser die image maps ondersteunt (meeste moderne browsers)

Je hebt dus een programma nodig om de map te maken.
Het beste programma hiervoor vind ik: MapEdit.
Je kunt een gratis evaluatieversie downloaden die een beperkte tijd geldig is.
Download en installeer MapEdit voordat je verdergaat.

Het maken van de image map

Voordat je MapEdit opstart kun je het beste eerst het HTML bestand maken met daarin de code naar het plaatje waar je een image map van wilt maken. Sla daarna het HTML bestand op en geef het een naam.

Start nu MapEdit.
Er komt direct een scherm in beeld waarmee je een bestand kunt openen.
Open het HTML bestand dat je zojuist hebt gemaakt.
Dan word je gevraagd om het plaatje te selecteren waar je een image map van wilt maken.
Selecteer het plaatje uit het lijstje en klik op "OK".

Je plaatje verschijnt nu in beeld.
Nu moet je de verschillende delen aangeven die je aanklikbaar wilt maken.
Je kunt rechthoeken, circels en polygonen selecteren door op de corresponderende ikoontjes (groen, blauw, rood) bovenaan te klikken.
Dit wijst zich verder eigenlijk vanzelf.

Als je de selecties voor een bepaald deel hebt gedaan, verschijnt er een scherm waarin je de URL's en acties voor dat deel moet opgeven.
Je moet invullen:

• URL: de URL waar je bezoekers naar toe wilt sturen als ze op dat deel klikken
• alt tekst: alternatieve tekst die verschijnt als bezoekers met de muis over dat deel bewegen
• target: vul hier _blank in als je wilt dat de links in een nieuw scherm openen! Andere targets zijn vooral van belang voor mensen die frames op hun site gebruiken
• JavaScript attributes: attributen voor JavaScript: OnMouseOver en OnMouseOut kun je opgeven. Dit hoef je niet per sé in te vullen

Als je tevreden bent met de selecties voor dat deel van de image map dan klik je op "OK".
Het bovenstaande herhaal je vervolgens voor alle delen die je wilt maken.

Als je alle delen hebt gemaakt dan wordt het tijd om het HTML document op te slaan. De code voor de image map wordt dan automatisch toegevoegd aan de HTML code. Klik dus op de derde knop van links: "Save HTML Document".

Je image map is nu klaar! Nu kun je testen of het werkt door het HTML bestand te bekijken met je browser. Daarna moet je het bestand en het plaatje natuurlijk nog op het web zetten zodat ook de bezoekers van je site er gebruik van kunnen maken.

Er kan natuurlijk nog veel meer met het programma MapEdit. Ik heb hier alleen de basisfuncties uitgelegd. Voor een overzicht van de andere mogelijkheden kun je de helpfile (help->contents) van MapEdit raadplegen.

Slot

Je ziet: het is helemaal niet moeilijk om een client-side image map te maken! Met dit artikel en het programma MapEdit ben je al snel in staat om een fraaie image map voor je eigen site samen te stellen.

Wat vond je van dit aritkel?

Hits: | Aantal Stemmen: | Gemiddelde:
 10987654321

Homepage-Maken Tip