Abbiamo visto che un'immagine può essere frazionata in blocchi così da far corrispondere a ciascun blocco un link ipertestuale e creare un sistema di navigazione grafico. L'unione dei vari blocchi in modo da riprodurre visivamente l'immagine originale sulla pagina Web richiede l'impiego di una tabella di layout. Il sistema è tuttavia complesso, trascina con sé tutte le imprevedibilità delle tabelle e non si presta a layout complessi, magari di forma astratta. Esiste un'alternativa che consiste nell'assegna all'immagine che dovrà fungere da elemento di navigazione una serie di coordinate che identificano aree cliccabili. A ciascuna di tali aree, poi, attribuiremo un link ipertestuale. In pratica tracciamo sull'immagine una mappa invisibile, indicando le coordinate in pixel dei vertici delle varie forme, calcolati partendo dall'angolo superiore sinistro dell'immagine.
Calcolare le coordinate a mano sarebbe un'impresa non da poco, ma fortunatamente tutti i principali editor HTML visuali prevedono strumenti che semplificano moltissimo questa operazione. Basta tracciare sulla figura i contorni delle varie zone e il programma calcolerà tutte le coordinate relative producendo anche il codice HMTL necessario per inserire la mappa immagine (image map) nella pagina. Le zone possono avere tre forme: circolare, rettangolare o poligonale.
Le mappe immagine possono essere di due tipi: il primo, che è anche il più comune, prende il nome di mappa immagine lato client (client side imagemap) e memorizza tutte le informazioni relative alla mappa all'interno della pagina HTML che contiene l'immagine. Ciò consente al browser di fornire informazioni sui link associati a ciascuna zona e costituisce il metodo di mappatura raccomandato dalle specifiche HTML 4.01.
Il secondo metodo, usato in origine, prendeva il nome di mappe immagine lato server e depositava le coordinate sul server che ospitava il sito, lasciando al server medesimo il compito d'interpretare l'azione dell'utente sulla mappa, restituendo l'indirizzo di link corretto. Oltre a essere molto più complicate da realizzare delle mappe lato client, le server side imagemap presentavano anche lo svantaggio di funzionare in modo diverso a seconda del server impiegato e di richiedere continue connessioni al server.
Per aggiungere una mappa a un'immagine esistente si usa il parametro usemap="nome_mappa" all'interno del tag <img> che identifica l'immagine stessa. Il valore "nome_mappa" punta a una mappa identificata dal tag <map name="nome_mappa"> che contiene tutte le coordinate delle zone cliccabili (hot spot). A ciascuna di queste associamo, poi, un link ipertestuale così da trasformare l'immagine in un elemento di navigazione.
Mappa immagine
Qui vediamo un'immagine a cui sono state abbinate tre zone cliccabili mediante la creazione di una mappa. Riconosciamo le tre forme consentite: rettangolo, cerchio e poligono.

Codice HTML per creare la mappa
Ecco il codice HTML per generare la mappa immagine vista prima.

|