La pagina su cui sto lavorando disegna un rettangolo su un'immagine, quando viene premuto click e trascinando il mouse.
Purtroppo non riesco a posizionare esattamente il puntatore sul bordo dell'immagine e non capisco il motivo.
Vi mando il codice, qualcuno mi aiuta??
grazie!!
<!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;
g_nNewOffsetX = 0;
g_nNewOffsetY = 0;
function offsetCoords()
{
var offsetInfo = ""
offsetInfo = "The x coordinate is: " + window.event.offsetX + "\r"
offsetInfo += "The y coordinate is: " + window.event.offsetY + "\r"
}
function changeState(nNewState)
{
switch (nNewState)
{
case ZW_IDLE : {
switch (g_nZWState)
{
case ZW_IDLE : {
break; }
case ZW_DRAWING : {
stateDrawing2Idle();
break; }
}
stateEnterIdle();
break; }
case ZW_DRAWING : {
switch (g_nZWState)
{
case ZW_IDLE : {
stateIdle2Drawing();
break; }
case ZW_DRAWING : {
stateDrawing2Drawing();
break; }
}
stateEnterDrawing();
break; }
}
g_nZWState = nNewState;
}
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;
var objDivZW = document.getElementById("div_zoom_window")
objDivZW.style.top=g_nOffsetY;
objDivZW.style.left=g_nOffsetX;
objDivZW.style.width="0";
objDivZW.style.height="0";
objDivZW.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_zoom_window";
//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_zoom_window").style.t op +
" left = " + document.getElementById("div_zoom_window").style.l eft;
offsetInfo = "Le nuove coordinate sono : " + newOffsetX + "\r" + newOffsetY
//alert(offsetInfo);
*/
}
function stateDrawing2Drawing()
{
/*
var newOffsetX = window.event.offsetX;
var newOffsetY = window.event.offsetY;
*/
var newOffsetX = g_nNewOffsetX;
var newOffsetY = g_nNewOffsetY;
var newX;
var newY;
if ( g_nOffsetX > newOffsetX )
{
newX = g_nOffsetX - newOffsetX ;
document.getElementById("div_zoom_window").style.l eft = newOffsetX +1;
}
else
{
newX = newOffsetX - g_nOffsetX;
document.getElementById("div_zoom_window").style.l eft = g_nOffsetX - 1;
}
if ( g_nOffsetY > newOffsetY )
{
newY = g_nOffsetY - newOffsetY ;
document.getElementById("div_zoom_window").style.t op = newOffsetY +1;
}
else
{
newY = newOffsetY - g_nOffsetY;
document.getElementById("div_zoom_window").style.t op = g_nOffsetY - 1;
}
var objDivZW = document.getElementById("div_zoom_window");
if ( g_nOffsetX > newOffsetX )
objDivZW.style.width = newX +1 ;
else
objDivZW.style.width = newX ;
if ( g_nOffsetY > newOffsetY)
objDivZW.style.height = newY +1 ;
else
objDivZW.style.height = newY ;
window.status = 'coordinate evento: ' + window.event.offsetX + ',' + window.event.offsetY+
" width = " + objDivZW.style.width +
" height = " + objDivZW.style.height;
}
function stateDrawing2Idle()
{
//window.alert("funzione 4");
}
function stateEnterIdle()
{
//window.alert("inizio stateEnterIdle");
document.getElementById("div_zoom_window").style.v isibility="hidden";
//window.alert("fine stateEnterIdle");
}
function initTransDiv ()
{
/*
// Inizializzo la dimensione del div locator2
var mydiv = document.getElementById ("div_zoom_window2");
var myimg = document.getElementById ("main_img");
mydiv.style.pixelWidth = myimg.width ;
mydiv.style.pixelHeight = myimg.height;
*/
}
</script>
<table>
<tr>
<td>
</td>
<td>
<span style="position:relative; cursor:crosshair"
onclick= "if (g_nZWState == ZW_IDLE) changeState(ZW_DRAWING);
else if (g_nZWState == ZW_DRAWING) changeState(ZW_IDLE);"
>
[img]locator.png[/img]
<div id="div_zoom_window"
style="position:absolute;
background-color:transparent;
border-style:solid; border-width:1px;
border-color:#FF0000;
font-size:0pt;visibility:hidden
cursor:crosshair;"
onmousemove="
if (g_nZWState == ZW_DRAWING) {
g_nNewOffsetY = window.event.offsetY + offsetTop;
g_nNewOffsetX = window.event.offsetX + offsetLeft;
changeState(ZW_DRAWING);
}"
>
</div>
</span>
</td>
</tr>
</table>
</body>
</html>
Rispondi quotando