A volte in una pagina web può essere molto utile rendere le immagini "sensibili" al mouse, in modo che cliccando una determinata area di un'immagine l'utente possa essere reindirizzato ad un'altra pagina. Alcuni esempi di applicazione:

• per esempio, una carta geografica può essere suddivisa in aree in base agli stati rappresentati, e al clic di uno stato reindirizzare l'utente a una pagina di descrizione dello stato;
• in una foto di gruppo, un clic su una delle persone rappresentate puo mandare ad una pagina con altre foto di qualle persona o con alcune informazioni su di essa.

Per inserire un'immagine "mappata" in una pagina html basta inserire un tag , sostituendo IDmappa con una parola che funga da identificativo; poi, bisogna inserire tra e tanti tag quante sono le aree sensibili da associare all'immagine. Il tag ha questi attributi:

• HREF, che, come nei link, indica l'URL di destinazione dell'area sensibile;
• SHAPE, che indica la forma dell'area: può essere RECT (rettangolare), CIRCLE (circolare) o POLY (poligonale);
• COORDS, che è un insieme di coordinate in pixel, separate da una virgola, che definiscono l'area sensibile; ovviamente, dipendono dalla forma: se SHAPE è RECT, le coordinate sono quattro (le prime due indicano il punto in alto a sinistra, le altre due il punto in basso a destra), se è CIRCLE sono tre (le prime due sono la posizione del centro, la terza il raggio), se è POLY sono il doppio del numero di punti del poligono (indicano, a coppie, le posizioni dei punti; in parole povere: x1,y1,x2,y2,xn,yn,...)

Una volta definite le aree, è sufficiente associare l'immagine alla mappa, aggiungendo l'attributo USEMAP e assegnandogli come valore l'identificativo della mappa preceduto da un cancelletto (#).

Concludo con un esempio, tratto dalla documentazione ufficiale del w3 schools, che mostra una parte del sistema solare e al clic di un pianeta mostra un'immagine di quel pianeta: