Ecco quello che fa:
Nell'immagine mappata (poligonale):
codice:
<area shape="poly" coords="85,87,93,90,103,96,112,97,132,95,133,98,133,105,145,110,142,118,143,122,139,130,137,135,135,140,130,146,123,152,103,131,98,108" href="/dove/toscana.html" onMouseOver="setBody('nomeregione','TOSCANA'); changeImage('italiaimg',toscana.src);" onMouseOut="setBody('nomeregione',''); changeImage('italiaimg',italiaoff.src);">
E queste le due funzioni:
codice:
function setBody(obj,body) {
if (is == null) return true;
if (is.ns4) {
this.layer = window.document[obj];
for(var i = 0; i < body.length; i++) {
this.layer.document.writeln(body[i]);
}
this.layer.document.close();
}
if (is.ie4) {
this.element = window.document.all[obj];
this.element.innerHTML = body;
}
if (is.ie5 || is.ns6) {
this.element = document.getElementById(obj);
this.element.innerHTML = body;
}
return true;
}
function changeImage(imgName,imgObj) {
if (is == null) return true;
if (is.ns4) {
eval('this.document.' + imgName + '.src = "' + imgObj + '"');
}
if (is.ie4) {
document.images[imgName].src = imgObj;
}
if (is.ie5 || is.ns6) {
document.images[imgName].src = imgObj;
}
return true;
}
L'effetto comunque si chiama rollover e per realizzarlo devi avere per ogni regione ue immagini specifiche, in modo da eseguire l'effetto colorazione!