La pagina che vi sottopongo dovrebbe dare la possibilità di disegnare con il trascinamento del mouse un rettangolo su un'immagine. Purtroppo non funziona, qualcuno mi sa aiutare, magari provando la pagina sul proprio browser (io utilizzo IE )
grazie a tutti.
<!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);"
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/jscript">
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()
{
/*
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 = newOffsetX - g_nOffsetX;
var 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");
}
</script>
<table>
<tr>
<td>
</td>
<td >
<span >
[img]locator.png[/img]
<!--
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>
</span>
</body>
</html>
Rispondi quotando
