ecco qua una soluzione... non ho potuto testare tutto il codice per vedere se effettivamente funziona tutto... ma lo potrai fare anche tu..
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
<head> 
<META http-equiv="Content-Script-Type" content="text/jscript"> 
<META http-equiv="imagetoolbar" content="no"> 
<TITLE>GisCo</TITLE> 
</head> 

 
<body 
onload="changeState(ZW_IDLE); initTransDiv();" 
ondblclick="offsetCoords()" style="topmargin:0; leftmargin:0;"> 

<center>Codice per sovrappore un div (rettangolino rosso) ad un TAG IMG.
 
Il tutto ottenuto usando i posizionamenti assoluti e relativi 
</center> 



<script type="text/javascript"> 

ZW_IDLE = 0; 
ZW_DRAWING = 1; 
g_nZWState = -1; 
g_nOffsetX = 0; 
g_nOffsetY = 0; 


function offsetCoords() 
{ 
var offsetInfo = "" 
offsetInfo = "The x coordinate is: " + window.event.offsetX + "\r" 
offsetInfo += "The y coordinate is: " + window.event.offsetY + "\r" 
//alert(offsetInfo); 
} 



function changeState(nNewState) 
{ 

//window.alert("g_nZWState=" + g_nZWState); 
//window.alert("nNewState=" + nNewState); 


switch (nNewState) 
{ 
case ZW_IDLE : { 
//window.alert("1"); 
switch (g_nZWState) 
{ 
case ZW_IDLE : { 
break; } 
case ZW_DRAWING : { 
stateDrawing2Idle(); 
break; } 
} 
//window.alert("2"); 
stateEnterIdle(); 
break; } 
case ZW_DRAWING : { 
//window.alert("chiamo drawing" + g_nZWState); 
switch (g_nZWState) 
{ 
case ZW_IDLE : { 
stateIdle2Drawing(); 
break; } 
case ZW_DRAWING : { 
stateDrawing2Drawing(); 
break; } 
} 
stateEnterDrawing(); 
break; } 
} 

g_nZWState = nNewState; 
//window.alert("g_nZWState dopo=" + g_nZWState); 
} 
function stateIdle2Drawing() 
{ 


var offsetInfo = "" 
offsetInfo = "The x coordinate is: " + window.event.offsetX + "\r" 
offsetInfo += "The y coordinate is: " + window.event.offsetY + "\r" 


g_nOffsetX = window.event.offsetX; 
g_nOffsetY = window.event.offsetY; 


stringa = "div_locator"; 
document.getElementById(stringa).style.top=g_nOffsetY; 
document.getElementById(stringa).style.left=g_nOffsetX; 
document.getElementById(stringa).style.width="0"; 
document.getElementById(stringa).style.height="0"; 

//window.alert ("idle2Drawing:top=" + document.getElementById(stringa).style.top); 
//window.alert ("idle2Drawing:left=" + document.getElementById(stringa).style.left); 

document.getElementById("div_locator").style.visibility="visible"; 




} 


function stateEnterDrawing() 
{ 
/* 
window.alert ("EnterDrawing"); 

newOffsetX = window.event.offsetX; 
newOffsetY = window.event.offsetY; 

sw_width = (newOffsetX - g_nOffsetX); 
sw_height = (newOffsetY - g_nOffsetY); 

stringa = "div_locator"; 
//window.alert("rowdisplayone stringa= "+stringa); 
document.getElementById(stringa).style.left=sw_width; 
document.getElementById(stringa).style.top=sw_height; 
document.getElementById(stringa).style.width=sw_width; 
document.getElementById(stringa).style.height=sw_height; 



window.status = 'coordinate click: ' + window.event.g_nOffsetX + ',' + window.event.g_nOffsetY+ 
" top = " + document.getElementById("div_locator").style.top + 
" left = " + document.getElementById("div_locator").style.left; 



offsetInfo = "Le nuove coordinate sono : " + newOffsetX + "\r" + newOffsetY 
//alert(offsetInfo); 
*/ 
} 

function stateDrawing2Drawing() 
{ 



var newOffsetX = window.event.offsetX; 
var newOffsetY = window.event.offsetY; 

var newX; 
var newY; 


if ( g_nOffsetX > newOffsetX ) 
{ 
newX = g_nOffsetX - newOffsetX ; 
document.getElementById("div_locator").style.left = newOffsetX
} 
else 
{ 
newX = newOffsetX - g_nOffsetX; 
} 
if ( g_nOffsetY > newOffsetY ) {
newY = g_nOffsetY - newOffsetY; 
document.getElementById("div_locator").style.top = newOffsetY
}
else {
newY = newOffsetY - g_nOffsetY; 
}

document.getElementById("div_locator").style.width = newX; 
document.getElementById("div_locator").style.height = newY; 

window.status = 'coordinate evento: ' + window.event.offsetX + ',' + window.event.offsetY+ 
" width = " + document.getElementById("div_locator").style.width + 
" height = " + document.getElementById("div_locator").style.height;

} 


function stateDrawing2Idle() 
{ 
//window.alert("funzione 4"); 
} 

function stateEnterIdle() 
{ 
//window.alert("inizio stateEnterIdle"); 
document.getElementById("div_locator").style.visibility="hidden"; 
//window.alert("fine stateEnterIdle"); 
} 

function initTransDiv () 
{ 
// Inizializzo la dimensione del div locator2 
var mydiv = document.getElementById ("div_locator2"); 
var myimg = document.getElementById ("img_locator"); 

window.alert ("img.width = " + myimg.width + " img.height = " + myimg.height); 

mydiv.style.width = myimg.width + "px"; 
mydiv.style.height = myimg.height + "px"; 

} 

</script> 




<table> 
<tr> 
<td> 
</td> 
<td > 
<span style="position:relative;"> 
[img]locator.png[/img] 

<!-- 
onmouseout="changeState(ZW_IDLE)" 
top=0px; bottom=0px; right=0px; left=0px; 
width=auto; height=auto; 
--> 
<div id="div_locator" 
style="position:absolute; 
background-color:transparent; 
border-style:solid; border-width:1px; 
border-color:#FF0000; 
font-size:0pt;visibility:hidden"> 
</div> 



<div id="div_locator2" 
style="position:absolute; 
background-color:transparent; 
border-style:solid; border-width:1px; 
border-color:#0000FF; 
font-size:0pt;" 
> 
</div> 


</span> 
</body> 
</html>