In plaats van 1 plaatje als een link te gebruiken is het ook mogelijk om 1 plaatje te gebruiken waarin meerdere links zitten. Uw provider/server moet dit wel ondersteunen, dit zou u na moeten vragen bij je provider (bij Cyberdots is dit mogelijk).
Dus u kunt 1 plaatje gebruiken waarover de eindgebruiker (de surfer) kan navigeren. U kunt bijvoorbeeld een plattegrond van uw website maken en verschillende delen van hetzelfde plaatje linken naar diverse webpagina's.

Coordinaten

Zelf ook zoiets maken? Allereerst heeft u natuurlijk een plaatje nodig, en de coordinaten van de gebieden die aanklikbaar moeten worden. Deze coordinaten kunt u achterhalen door in een grafisch programma met de muispijl op de plekken te gaan staan die u wilt defineren. De meeste programma's zullen dan de coordinaten van de muispijl weergeven, zodat u een definitiebestand kunt aanmaken. De in deze cursus eerder besproken IMG-label verwijst naar een URL, maar in een zogenaamd definitiebestand kun je opgeven naar welk URL moet worden doorverwezen als je op een bepaald gebied van een plaatje klikt.

Methodes

Er zijn drie methoden waarmee image-maps werken. Twee gaan ervan uit dat de server 'kijkt' waar er wordt geklikt in de afbeelding (server-side). Bij de andere, meest eenvoudige, manier houdt de browser in de gaten waar er wordt geklikt in een afbeelding (client-side).

Serverside

Bij deze methode maken we gebruik van een HTML-bestand, een definitiebestande en een CGI-programma (Common Gateway Interface, draait op de server bij de provider). Alleen het HTML-bestand wordt binnengehaald door de browser. Als iemand op het plaatje klikt, leest de browser de coordinaten van de muispijl ten opzichte van de linkerbovenhoek van het plaatje. Deze coordinaten worden vervolgens doorgegeven aan de server, die ze doorgeeft aan het CGI-programma. Na wat rekenwerk retourneert het programma de URL die bij de aangeklikte positie hoort en stuurt deze URL door naar de browser. De vorm van het definitiebestand is afhankelijk van het type server. Server kunnen twee formaten gebruiken:

Het CERN-formaat: region_type (x1, y1) (x2, y2) URL
Het NCSE-formaat: region-type URL (x1, y1) (x2, y2)

Zoals u ziet is dit een vrij complexe methode: u moet weten welk formaat de server bij je provider ondersteunt en u zult gebruik kunnen maken van een CGI-programma. Gelukkig kan het ook eenvoudiger.

Clientside

Sinds Netscape Navigator 2.0 kan de browser het hele proces achter een image map afhandelen. Bij deze methode wordt het definitiebestand in het HTML-bestand opgenomen. Als de bezoeker van een webpagina op een image map klikt, gaat de browser zelf na waar er is geklikt en welke URL daarbij hoort. De browser gaat daarna naar deze lokatie. De HTML-code is vrij eenvoudig. Een voorbeeld:

De naam die u meegeeft in de MAP-label (in het voorbeeld 'navigatiebalk') gebruikt u om in de IMG-label te verwijzen naar de definitie van de gebieden. Binnen de MAP-label defineer je de gebieden binnen de afbeelding die aanklikbaar zijn. U doet dit met de AREA-label. Deze label kent twee attributen: SHAPE="X" en COORDS="X".

Mogelijkheden

De waarde van het SHAPE-attribuut geeft aan welke vorm het aanklikbare gebied heeft, en het COORDS-attribuut definieert de coordinaten. Mogelijkheden voor SHAPE en COORDS zijn:

Rechthoek: RECT x1, y1, x2, y2
Veelhoek: POLY x1, y1, x2, y2, ... xn, yn
Cirkel: CIRCLE x, y, straal
Standaard: DEFAULT niet aangegeven; hele afbeelding

Met DEFAULT kunt u de standaard URL opgeven waar de browser naar zal verwijzen als een gebruiker op een deel van een plaatje klikt dat niet is gedefinieerd. In plaats van HREF kunt u ook NOHREF gebruiken om aan te geven dat een gebied niet aanklikbaar is. Overigens is het van belang dat er ook een text only-versie is van de webpagina; er zijn nogal wat mensen die met 'afbeeldingen uit' surfen en dus de image map niet kunnen zien.

Plaatjes & software

Plaatjes vindt u overal op het web, bijvoorbeeld in Ftp-archieven, of maakt u zelf met een grafisch of tekenprogramma of natuurlijk met een digitale camera.

Om plaatjes te maken en te bewerken kunt u bijvoorbeeld Paint Shop Pro (voor windows) gebruiken. Paint Shop Pro is shareware en doet absoluut niet onder voor commerciele pakketten (www.webweaverxxi.com/graphics.html).

Een aanrader voor Macintosh-gebruikers is het shareware programma GrahicConverter (www.lemkesoft.de/index.html), eventueel in combinatie met GifConverter (www.kamit.com/gifconverter of download direct op ftp.euro.net/Mac/info-mac/_Graphic_%26_Sound_Tool/grf/gif-converter-237.hqx

Kijk ook eens op http://www.brooks.pvt.k12.ma.us/~bheun/Gifcon.html).
Wil je snel en eenvoudig complete image maps aanmaken? Gebruik dan de WYSIWYG image map-editor Mapedit. Mapedit (Mac en Windows) is shareware, dertig dagen gratis te gebruiken, waarna u voor verder gebruik moet betalen ($ 25), zie http://www.boutell.com/mapedit).