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!