La soluzione che vi propongo oggi riguarda la creazione di una mappa immagine dove le aree vengono evidenziate al passaggio del mouse, qualcosa di simile all’immagine qua sotto.

Per farlo senza ricorrere ad html5 esistono principalmente due modi:

1. Utilizzare un’overlay con un div e css. Elegante ma limitato alle forme rettangolari.
2. Sostituire l’immagine. Un po macchinoso soprattutto quando ci sono molte aree cliccabili.

Considerando come priorità la rapidità e semplicità di creare una mappa del genere ho creato uno script, lo potete scaricare alla fine di questo articolo, che utilizza come input i file prodotti da gimp.

Nel menu filtri > web di gimp trovate uno strumento per creare in modo visuale delle mappe immagine in html.

Specificate un indirizzo e un nome per ogni area creata e salvate il file html e l’immagine nella stessa cartella dello script, l’immagine deve essere in formato png e i file devono chiamarsi immagine.png e immagine.html, vedete l’esempio.

Lo script analizza il file html estrapolando le informazioni sulle varie aree e per ognuna di queste crea una versione dell’immagine di base con l’area evidenziata.

In seguito crea un file html da utilizzare come base di partenza per la pagina dove utilizzerete l’immagine, questo file contiene oltre alla mappa anche lo script javascript che si occupa di effettuare il preload delle immagini e il cambio dell’immagine al passaggio del mouse.

Scarica lo script (Pronto da provare, include un’immagine e relativo file html).

Scarica la demo (Il file html e le immagini prodotte dallo script qua sopra.)