Een toegankelijke imagemap.

Bron: http://www.sceneone.nl/navigatie/imagemap.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Degene onder jullie die in bijvoorbeeld Dreamweaver wel eens een imagemap gemaakt hebben kennen het principe.
Je hebt een afbeelding en op meerdere plaatsen op die afbeelding wil je een aantal linkjes hebben, zogenaamde hotspots. Je kunt natuurlijk van die hele afbeelding een link maken, maar dat is niet wat je wilt, je wilt meerdere linkjes op precieze plaatsen.

Je kunt dit dus in Dreamweaver maken. Dreamweaver genereert dan de bijhorende code voor je met een hele bende aan coördinaten en nog een bord vol spaghetti-code. Niet om door te komen, volkomen ontoegankelijk en bovenal onnodig.

Je voelt 'm al aankomen: precies, dit kan met behulp van css vele malen netter en nog toegankelijk ook.

Stap voor stap

Ik begin met een afbeelding, die ik als background image in een div zet. Ik geef de box de afmetingen van de afbeelding:

CSS: div#imagemap{
background: url(../_img/imagemap.gif);
width: 250px;
height: 100px;
}
HTML: <div id="imagemap"></div>

bekijk het resultaat

Je ziet één afbeelding met daarin verwerkt drie elementen. Die drie elementen moeten hun eigen linkje krijgen.
Ik wil dat die linkjes aan een paar voorwaarden voldoen. Omdat het eigenlijk een kleine navigatie structuur is wil ik dat ze in een list zitten. Omdat de grafische elementen nietszeggend zijn voor tekstbrowsers en screenreaders wil ik van de linkjes tekstlinkjes maken. Oké, daar gaatie:

CSS: div#imagemap{
background: url(../_img/imagemap.gif);
width: 250px;
height: 100px;
}
HTML: <div id="imagemap">
<ul>
<li><a href="#" title="naar de beginpagina"><span>naar de beginpagina</span></a></li>
<li><a href="#" title="aanmelden voor onze nieuwsbrief"><span>aanmelden voor onze nieuwsbrief</span></a></li>
<li><a href="#" title="stuur ons een e-mail"><span>stuur ons een e-mail</span></a></li>
</ul>
</div>

bekijk het resultaat

Nu wil ik eerst van een paar dingen af. Ik wil van die bullits af (da's niet zo moeilijk) en ik wil van die tekst af.
Die tekst is niet bedoeld voor gewone browsers, die is bedoeld voor tekstbrowsers en screenreaders. Het is genoeg als de tekst in mijn html code staat. Ik hoef de tekst niet te zien
Dat is de reden dat ik de tekst alvast in een span gezet heb. Ik kan nu via m'n css die span aanspreken terwijl ik de rest van de elementen met rust laat:

CSS: div#imagemap{
background: url(../_img/imagemap.gif);
width: 250px;
height: 100px;
}

span{
display: none;
}

ul{
list-style: none;
}
HTML: <div id="imagemap">
<ul>
<li><a href="#" title="naar de beginpagina"><span>naar de beginpagina</span></a></li>
<li><a href="#" title="aanmelden voor onze nieuwsbrief"><span>aanmelden voor onze nieuwsbrief</span></a></li>
<li><a href="#" title="stuur ons een e-mail"><span>stuur ons een e-mail</span></a></li>
</ul>
</div>

bekijk het resultaat

Nu wil ik de a elementen zichtbaar maken. Dat wil zeggen, als je er met je muis overheen gaat moet de cursor een handje worden en de title moet zichtbaar worden.
Bovendien wil ik dat ieder linkje de juiste afmetingen heeft, even groot als het grafische element waar dat linkje bijhoort.
Ik kan de a elementen die in de li's zitten op twee manieren voorzien van afmetingen.
Ik kan er block elementen van maken. Maar dat zou in dit geval raar zijn omdat ik wil dat ze op dezelfde horizontale lijn komen te staat.
Ik kan de a elementen ook links laten floaten, dan kan ik ze ook een hoogte en een breedte geven. Dat is in dit geval logischer.
Dus:

CSS: div#imagemap{
background: url(../_img/imagemap.gif);
width: 250px;
height: 100px;
}

span{
display: none;
}

ul{
list-style: none;
}

a{
float: left;
width: 50px;
height: 48px;
}
HTML: <div id="imagemap">
<ul>
<li><a href="#" title="naar de beginpagina"><span>naar de beginpagina</span></a></li>
<li><a href="#" title="aanmelden voor onze nieuwsbrief"><span>aanmelden voor onze nieuwsbrief</span></a></li>
<li><a href="#" title="stuur ons een e-mail"><span>stuur ons een e-mail</span></a></li>
</ul>
</div>

bekijk het resultaat

We zijn een heel eind, maar zoals je ziet is de positionering nog niet helemaal jofel. Dat kunnen we oplossen door de juiste margins en paddings te geven op de juiste plaatsen. Een kwestie van passen en meten:

CSS: div#imagemap{
background: url(../_img/imagemap.gif);
width: 250px;
height: 100px;
}

span{
display: none;
}

ul{
list-style: none;
margin: 0;
padding: 23px 0 0 0;
}

a{
float: left;
width: 50px;
height: 48px;
}

li{
margin: 0 0 0 25px;
}
HTML: <div id="imagemap">
<ul>
<li><a href="#" title="naar de beginpagina"><span>naar de beginpagina</span></a></li>
<li><a href="#" title="aanmelden voor onze nieuwsbrief"><span>aanmelden voor onze nieuwsbrief</span></a></li>
<li><a href="#" title="stuur ons een e-mail"><span>stuur ons een e-mail</span></a></li>
</ul>
</div>

bekijk het resultaat

Als je nu bij jezelf denkt: "Man, er klopt nog steeds geen reet van!", dan gebruik je waarschijnlijk Internet Explorer of misschien Opera. Voor Opera moeten we de li ook nog links laten floaten en IE heeft daarnaast ook nog de 'display: inline;' declaratie voor de li nodig:

CSS: div#imagemap{
background: url(../_img/imagemap.gif);
width: 250px;
height: 100px;
}

span{
display: none;
}

ul{
list-style: none;
margin: 0;
padding: 23px 0 0 0;
}

a{
float: left;
width: 50px;
height: 48px;
}

li{
margin: 0 0 0 25px;
float: left;
display: inline;
}
HTML: <div id="imagemap">
<ul>
<li><a href="#" title="naar de beginpagina"><span>naar de beginpagina</span></a></li>
<li><a href="#" title="aanmelden voor onze nieuwsbrief"><span>aanmelden voor onze nieuwsbrief</span></a></li>
<li><a href="#" title="stuur ons een e-mail"><span>stuur ons een e-mail</span></a></li>
</ul>
</div>

bekijk het resultaat

Zo dan.

naar het begin van de pagina