Wat is een imagemap?

Een imagemap is een plaatje waarmee de gebruiker interactief mee kan werken. Als webbouwer kun je verschillende dingen laten gebeuren als de gebruiker op een bepaald deel van het plaatje klikt of er eenvoudigweg met de muis erboven hangt.

Hoe maak je een imagemap?

Als eerste moet je plaatje op de gebruikelijke manier in je pagina plaatsen. Daarna zul je de hotspots moeten definiëren. De hotspots zijn de plaatsen waar een actie moet gaan gebeuren.

Neem de onderstaande foto van dit mooie chateau in Frankrijk.

chateau rosans Francois de Bonne l'Age D'Or les Deux Magots Gite

Door met de muis boven één van de drie rechtse ramen van de bovenste etage te zweven, of boven de trap rechts, zie je de muiscursor veranderen in een handje. Je kunt hier dus klikken. Probeer het maar.

Hieronder zie je hoe de code eruit ziet.

<img src="chateau.jpg" alt="chateau rosans" width="549" height="354" border="0" usemap="#ChateauRosans" />
<map name="ChateauRosans" id="ChateauRosans">
<area shape="rect" coords="296,91,311,121" href="franspopup.jpg" target="_blank" alt="Francois de Bonne" />
<area shape="rect" coords="380,104,390,133" href="lagedorpopup.jpg" target="_blank" alt="l'Age D'Or" />
<area shape="rect" coords="416,113,426,139" href="deuxmagotspopup.jpg" target="_blank" alt="les Deux Magots" />
<area shape="rect" coords="447,214,498,257" href="gitepopup.jpg" target="_blank" alt="Gite" />
</map>

Door in de img-tag de optie usemap te gebruiken, vertel je de browser dat er een imagemap bij dit plaatje hoort. Na de img-tag komt er een map-tag met het gekozen id uit de img-tag; in dit geval "ChateauRosans".

Binnen de map-tag, maak je één of meer area-tags. Deze tags bepalen de plek van de hotspot en de link dit geopend moet worden bij een klik; in dit geval alleen het plaatje van de betreffende kamer.

Dit is een eenvoudig voorbeeld van een imagemap. Maar je kunt hier nog veel meer leuke dingen doen.

Ga nu verder naar stap 2: Infopopup met imagemap