Per creare una " mappa di un'immagine " esistono diversi modi, in questo articolo illustrerò un modo molto semplice per crearne una, utilizzando GIMP software gratuito di grafica, JQuery e poche righe di JavaScript.
L'esempio prevede la mappatura dell'immagine italia.jpg e un menù laterale
le cui dimensioni reali sono 440x525, utilizzando GIMP da questa immagine ricaveremo le immagini di Hover colorando di colore diverso ogni singola regione, ad esempio per la regione Sicilia otteniamo la seguente immagine:
così per tutte le altre regioni, per avere un codice JavaScript sintetico ho rinominato le immagini di Hover con italia_1.jpg, italia_2.jpg,..., italia_20.jpg.
Fatto questo partendo dall'immagine principale ( italia.jpg ) creiamo la mappa dal menù Gimp " Filtri - Web - Mappa immagine ", ci ritroveremo così in una nuova schermata di GIMP dove è possibile creare le diverse aree utilizzando le sezioni Poloigono, Cerchio, Rettangolo dal menù " Mappatura ", una volta completate tutte le mappature salviamo il file dal menù "File - Salva come", il file che verrà generato è in formato .map ed è costituito da codice html, e quindi modificabile col nostro IDE preferito.
A questo punto andiamo a definire le funzioni " function ImgHoverOn() " e " function ImgHoverOff() ":
Codice JavaScript
function ImgHoverOn(i)
{
var IMG = document.getElementById("immagine");
IMG.src = "images/italia_"+i+".jpg";
};
function ImgHoverOff()
{
var IMG = document.getElementById("immagine");
IMG.src = "images/italia.jpg";
};" immagine " è l'id dell'immagine italia.jpg, queste due funzioni ci permettranno di scambiare l'immagine principale ( quando il mouse è sopra ) con l'immagine di hover relativa alla regione e di ricaricare di nuovo l'immagine principare quando il mouse è fuori, inoltre queste due funzioni verrannno richiamate rispettivamente in " onmouseover " e in " onmouseout " , cioè avremo un codice html di questo tipo:
Codice HTML
<img src="images/italia.jpg" width="440" height="526" border="0" usemap="#map" id="immagine" />
<map name="map">
<area shape="rect" title="Annunci in Sardegna" coords="48,288,104,395" alt="Sardegna" onmouseover="ImgHoverOn(2)" onmouseout="ImgHoverOff()" href="#" />
<area shape="rect" title="Annunci in Sicilia" coords="215,445,331,521" alt="Sicilia" onmouseover="ImgHoverOn(1)" onmouseout="ImgHoverOff()" href="#" />
<area shape="rect" coords="340,355,390,449" alt="Calabria" title="Annunci in Calabria" onmouseover="ImgHoverOn(3)" onmouseout="ImgHoverOff()" href="#" />
.............
............
</map>Per completare il tutto andiamo a inserire nella nostra pagina web l'ultima versione della libreria jquery e a definire l'effetto il metodo hover() jquery sulle singole aree:
Codice JavaScript
$(document).ready(function()
{
$('area').hover(function(){
var alt = $(this).attr('alt');
$('a.'+alt).addClass('aHover');
},
function(){
var alt = $(this).attr('alt');
$('a.'+alt).removeClass('aHover');
}
);
}
);aHover è una classe che ho definito nel foglio di stile allegato alla pagina:
Codice CSS
.aHover
{
color: #fff;
background: blue;
}