problema (credo stupido) con mappa

[dash]

salve,
ho una pagina in cui c'è questa mappa

[img]../images/sfondo.jpg[/img] 
<map name="mappa" id="mappa"> 
<area shape="poly" coords="167, 127, 111, 130, 111, 122, 112, 119, 120, 99 , 127, 90, 139, 79, 149, 76, 164 , 73" ALT="Verde" onmouseover="RollMapOn(1)" onmouseout="RollMapOff()"></area> 
</map>

e onmouseover e onmouseout sono gestiti da questa funzione javascript

function RollMapOn(i)

{

    var IMG = document.getElementById("mappa");

    IMG.src = "../images/map_" + i + ".jpg"; 

	 document.getElementById('box').innerHTML=arrComuni[i];

}

function RollMapOff()

{

    var IMG = document.getElementById("mappa");

    IMG.src = "../images/mappa.jpg";

	 document.getElementById('box').innerHTML='';

l'immagine map_i è la stessa immagine mappa.jpg solo con la parte relative alle coordinate offuscata e hanno ovviamente le stesse dimensioni.
Il problema è che all'evento onmouseover l'immagine map_i che viene caricata è spostata di circa 1 px in alto e a sinistra...come fare per far in modo che combacino perfettamente!?!?
GRAZIE