Ho trovato la soluzione!!

Basta modificare la riga
<span>

con:

<span style="position:relative;">


Adesso, però, come noterai, se disegno il rettangolo partendo da dx e trascinando il mouse verso sinistra, me lo disegna al contrario!!!

Uffa, ne uscirò viva da questa cosa?

ti rimando tutto il codice modificato, così lo puoi provare da lì...

<!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_nOffs etY;
document.getElementById(stringa).style.left=g_nOff setX;
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.visib ility="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_wid th;
document.getElementById(stringa).style.top=sw_heig ht;
document.getElementById(stringa).style.width=sw_wi dth;
document.getElementById(stringa).style.height=sw_h eight;



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 ;
}
else
{
newX = newOffsetX - g_nOffsetX;
}
if ( g_nOffsetY > newOffsetY )
newY = g_nOffsetY - newOffsetY ;
else
newY = newOffsetY - g_nOffsetY;


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

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


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

function stateEnterIdle()
{
//window.alert("inizio stateEnterIdle");
document.getElementById("div_locator").style.visib ility="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>

</img>

<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>