HTML op het net - Printversie

Klik hier voor de inhoudsopgave

HTML op het net - Printversie - Maps
Originele URL: http://html.op-het.net/tekst/maps.html

Inleiding

Clickable maps (kortweg maps) zijn aanklikbare afbeeldingen waarbij verschillende gebieden binnen één afbeelding verwijzen naar verschillende links.

Client-side clickable maps

Client-side wil zeggen dat de gebieden en links gedefinieerd worden in het html-bestand. Het nadeel van deze manier dat deze alleen ondersteund wordt door Netscape vanaf versie 2 en Internet Explorer vanaf versie 3. Je mag er tegenwoordig echter wel vanuit gaan dat de meeste bezoekers over een browser beschikken die dit aan kan.
De afbeelding moet als volgt gedefinieerd worden:
<IMG SRC="plaatje.gif" ISMAP USEMAP="#naam" BORDER=0>
Hierbij geeft ISMAP aan dat de afbeelding een map is en USEMAP="#naam" welke definitie gebruikt moet worden.
Zo'n definitie kan er als volgt uitzien:
<MAP NAME="naam">
<AREA COORDS="x1,y1,x2,y2" HREF="file.html" SHAPE="rect" ALT="tekst">
</MAP>
Hierbij zijn x1 en y1 de coördinaten van de linkerbovenhoek en x2 en y2 de coördinaten van de rechteronderhoek, HREF="file.html" geeft de link aan die geactiveerd moet worden als er in dit gebied op het plaatje wordt geklikt, SHAPE="rect" geeft aan welke vorm het gebied heeft: rect voor een rechthoek en circle voor een cirkel. ALT="tekst" is een tekst die getoond wordt als de afbeelding niet geladen kan worden, of als je de muis over het gebied beweegt.
Dit systeem is zo opgezet, dat als je ergens klikt dat niet gedefinieerd is, het dichtstbijzijnde gebied wordt geactiveerd. Dit betekent dat als er maar één gebied gedefinieerd is, het niet uitmaakt waar je klikt, omdat het dichtstbijzijnde gebied altijd dat ene gebied is.

Tip

*	Zie hieronder voor de tip.

Server-side clickable maps

Tegenover Client-side staat Server-side. Dit betekent dat de server de klik op de afbeelding afhandelt, vaak met behulp van een CGI-script. Deze clickable maps hebben een bestandje nodig waar de definities in staan. Als de afbeelding dan aangeklikt wordt, wordt er een CGI-script opgestart dat in dat bestand kijkt en aan de hand daarvan de link uitvoert.
Dit is een voorbeeld:
<A HREF="klik.map"><IMG SRC="klik.gif" ISMAP BORDER=0></A>
Het bestand met de definities moet de extensie .map hebben, omdat anders het CGI-script niet gestart wordt. Zo'n bestand kan er als volgt uitzien:
#map voor klik.gif
default file1.html
rect file2.html 0,0 130,79
rect file3.html 131,0 365,79
rect file4.html 366,0 499,79
Alle regels die beginnen met een # worden gezien als commentaar en worden niet uitgevoerd. default geeft de link aan als een gebied niet gedefinieerd is. rect geeft aan dat er een rechthoekig gebied gedefinieerd gaat worden. Hierachter staan achtereenvolgens het doel en de coördinaten van de linkerboven- en de rechteronderhoek.
Of deze methode werkt is afhankelijk van de provider, maar deze zal bij nagenoeg iedere provider werken. Verder werkt deze methode niet 'off-line', wat betekent dat als je je pagina's 'thuis' uittest, dit niet zal werken. Als je het echter de bestanden op het Internet zet, dan werkt het wel.

Tip

Om maps te maken, is het programma Mapedit heel erg handig. Met dit programma kan je in een afbeelding heel simpel de gebieden aangeven en daar een link aan koppelen. Het programma schrijft dan de bijbehorende html-code of een .map bestandje.
Een shareware versie van dit programma is te downloaden van http://www.boutell.com/mapedit.