Grafisch

Clickable Maps

en clickable map is een plaatje dat diverse links bevat. Een specifiek deel van een plaatje verwijst naar een bepaalde link. Het logo bovenaan deze pagina is een voorbeeld van zo'n map. Het werkt met coördinaten.

<map name="webmees">
<area shape="rect" alt="Home"
 coords="20,65,67,76" href="index.html">
</map>

map name De naam verwijst naar het gebruikte plaatje.
alt Hiermee zet je een tekst op het scherm als alternatief voor het klikbare gebied.
area shape Hierdoor wordt de vorm van het klikbare deel gedefinieerd. Met coords (coordinates) geef je de precieze plaats aan, waarna href de eigenlijke link legt.

1. circle voor een cirkelvorming gebied. Drie getallen: het middelpunt van de cirkel in horizontale en in verticale richting, en de straal van de cirkel.
2. poly polygon, voor een veelhoekig gebied. Voor een aantal hoekpunten een coördinatenpaar, waarbij de horizontale en de verticale richting worden vastgelegd.
3. rect rectangle, voor een rechthoekig gebied. Vier getallen: de linker bovenhoek in horizontale richting, de linkerbovenhoek in verticale richting, de rechter benedenhoek in horizontale richting en de rechter benedenhoek in verticale richting.

Er wordt horizontaal altijd gerekend vanaf de linkerkant en verticaal van de bovenkant van de afbeelding.

<area shape="rect" coords="5,9,76,24"
 alt="tekst" href="bestand.html">

Om het netjes af te werken is er een aparte code voor die delen van het plaatje die niet klikbaar zijn:

<area shape="default" nohref>

Het plaatje dat de clickable map bevat, neem je als volgt op:

<img src="img/logo.gif"
 alt="De Webmees van Hans Werksman" border=0
 width=400 height=90 usemap="#webmees">

usemap Geeft aan welk bestand gebruikt moet worden. Dit is gelijk aan de map name, voorafgegaan door een #, het standaardteken voor een link binnen hetzelfde document.

Programma's
Je kunt zelf gaan de coördinaten gaan berekenen, maar het is veel handiger om er een programma voor te gebruiken.

Tot slot
Gebruik voor een clickable map geen geheugenvretende plaatjes. Mijn logo lust nog geen 6 Kb. Bovendien moet je naast de map altijd een tekstvariant hebben, zodat bezoekers die de plaatjes hebben uitgezet ook de weg kunnen vinden.