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>
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>
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>
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>
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>
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>
Zo dan.