Client side imagemap
Een client side imagemap is een klikbaar plaatje, waarbij alle informatie over de te volgen links al in het HTML document staat. Er is dus geen CGI-script meer voor nodig, en dat is een groot voordeel als je geen cgi-scripts hebt. (`Client side' slaat dus op het feit dat je browser, oftewel de client, de boel regelt.)En het is kinderlijk eenvoudig. Ik gebruik een client side map in de knoppenbalk bovenaan deze pagina (die daardoor veel sneller inlaadt dan drie losse plaatjes!), en ook is de stadion-informatie op mijn EK'96 pagina op die manier geordend.
Je moet eerst vertellen dat je plaatje een map is ('ismap'), en welke naam de map heeft ('usemap="#naam"'):
<img src="knopbalk.jpg" ismap usemap="#topmap"
border=0>
De feitelijke map definieer je in hetzelfde HTML document, op deze
manier:
<map name="topmap">
<area coords="0,0, 159,25" href="index.html">
<area coords="160,0, 319,25" href="#links">
<area coords="320,0, 480,25"
href="mailto:michielb@pi.net">
</map>
De naam van de map moet overeenstemmen met de naam die in usemap staat, in het img tag, en de rechthoekige gebieden worden bepaald
door de coordinaten. De links staan er direct achter.
Simpeler kan het niet, lijkt me. Het grote nadeel is dat dit alleen nog maar
werkt in Netscape 2.0 en hoger, en Microsoft Internet Explorer 2.0 en hoger.
Voorlopig is het dus waarschijnlijk wel gewenst om tegelijkertijd een
referentie te maken naar een cgi-script:
<a href="/cgi-bin/imagemap/menu.map"><IMG WIDTH=120
HEIGHT=67 SRC="icons/menu.gif" border=0
usemap="#menu" ismap></a>
waarbij je dus in een aparte `menu.map' file de server-afhankelijke cgi-bin imagemap informatie zet. Als dat niet mogelijk is moet je gebruikers een andere mogelijkheid bieden om je linkjes te volgen.
Een bijkomend voordeel van client side maps is dat de gebruiker onderin het browserwindow ziet waar de link heen leidt; als de muis over een ander gedeelte wordt bewogen is dat onderin beeld te zien. Om dit uit te proberen heb ik hier even de knoppenbalk gezet. Beweeg je muis er maar over...
Overigens kan je binnen het area ook het target specificeren, zoals uitgelegd op de frames pagina.
Meer informatie over client-side imagemaps, inclusief voorbeelden over anders-vormige `klikbare gebieden' (cirkels en polygonen), is te vinden op de mooie Client Side Imagemap Tutorial.
