Waarom Image Maps

Images maps zijn dan handig als je eens een andere manier van navigatie wenst te maken, en als je het op de nieuwe manier zal doen heb je het voordeel dat deze toegankelijker zal zijn en webstandaarden compatibeler is als de oude manier van Image Maps.

Op de normale manier zal je HTML moeten dwingen elementen op hun plaats te krijgen wat semantisch gezien niet echt goed klinkt, dan nog maar te zwijgen van toegankelijkheid omwille het feit dat er geen ondersteuning geboden wordt voor text-browsers.

De oude manier van Image Maps

<img src="images/doom.jpg" width="512" height="384" border="0"
usemap="#map" />
<map name="map" id="map">
<area shape="rect" coords="0,0,150,150" href="#"
alt="item01" />
<area shape="rect" coords="150,160,250,260" href="#"
alt="item02" />
<area shape="rect" coords="290,280,390,380" href="#"
alt="item03" />
</map>

Op deze manier zal, als CSS om een of andere reden is uitgeschakelt, je niets te zien krijgen.

De nieuwe manier van Image Maps

XHTML code

Daar een navigatie meestal samengesteld wordt uit een <ul> of een <ol>, zullen we daar ook nu niet van afwijken.

<ul id="navigatie">
<li id="blok1"><a href="#" title="Beschrijving link 1">Link 1</a></li>
<li id="blok2"><a href="#" title="Beschrijving link 2">Link 2</a></li>
<li id="blok3"><a href="#" title="Beschrijving link 3">Link 3</a></li>
</ul>

CSS code

Om een Image Map te hebben moet je ook een image hebben natuurlijk, deze plaasten we als achtergrond voor de #navigatie

#navigatie {
position: relative;
width: 512px;
height: 384px;
background: url("doom.jpg");
}

Nu gaan we iets speciaal doen, daar de #navigatie relative is gepositioneerd, gaan we de links absolute positioneren, wat inhoud dat we nu exact kunnen bepalen welke link waar komt te staan.
Meer daarover kan je bij StopDesign lezen.

Alsook gaan we ervoor zorgen dat de tekst van de links niet zichtbaar is door text-indent: -9999px;.

#navigatie a {
text-indent: -9999px;
text-decoration: none;
position: absolute;
border: 1px solid #FFF;
}

Blijft ons eigenlijk alleen nog maar te bepalen waar de links komen te staan spreek: positioneren, alsook te bepalen via :hover wat er moet gebeuren.

#blok1 a {
top: 0;
left: 0;
width: 150px;
height: 150px;
}
#blok2 a {
top: 149px;
left: 150px;
width: 150px;
height: 150px;
}
#blok3 a {
top: 0px;
left: 150px;
width: 150px;
height: 150px;
}
#blok1 a:hover {
background: transparent url("doom.jpg") 0 -390px no-repeat;
}
#blok2 a:hover {
background: transparent url("doom.jpg") -250px -610px no-repeat;
}
#blok3 a:hover {
background: transparent url("doom.jpg") -350px -380px no-repeat;
}

Voorbeeld

Hoe dit allemaal uitziet kan je bekijken op deze pagina.