Selezionare l'area di un'immagine
<html>
<head>
<style type="text/css">
#selimg{
position:absolute;
left:10px;
top:20px;
z-index:0;
}
#coord{
position:absolute;
left:10px;
top:0px;
}
#select{
position:absolute;
left:210px;
top:0px;
}
#sel{
position:absolute;
left:10px;
top:10px;
width:0px;
height:0px;
border:1px solid #ff0000;
background-color:#00ff00;
font-size:0px;
z-index:1;
opacity:0.25;
filter:alpha(opacity=25);
}
</style>
<script type="text/javascript">
var left=10;
var top=20;
var w=0;
var h=0;
var selimg="selimg";
var selid="sel";
var x1=0;
var x2=0;
var y1=0;
var y2=0;
var ssel=false;
var sel=null;
var coord=null;
function showcoord(){
var sx1=x1-left;
var sx2=x2-left;
var sy1=y1-top;
var sy2=y2-top;
coord.innerHTML="("+sx1+", "+sy1+") - ("+sx2+", "+sy2+")";
}
function setsel(dx, dy){
sel.style.left=x1+"px";
sel.style.top=y1+"px";
sel.style.width=dx+"px";
sel.style.height=dy+"px";
}
function moveTheMouse(e){
var ev=e?e:event;
if (ssel){
var firedobj = ev.target ? ev.target : ev.srcElement;
if ((firedobj.id == selimg)||(firedobj.id == selid)){
x2 = ev.clientX;
y2 = ev.clientY;
if((x2>x1)&&(y2>y1)){
setsel(x2-x1,y2-y1);
showcoord();
}
return false;
}
}
}
function startSel(e){
var ev=e?e:event;
var firedobj = ev.target ? ev.target : ev.srcElement;
if ((firedobj.id == selimg)||(firedobj.id == selid)){
ssel = true;
x1 = ev.clientX;
y1 = ev.clientY;
x2=0;
y2=0;
setsel(0,0);
showcoord();
return false;
}
}
function stopSel(e){
var ev=e?e:event;
if (ssel){
var firedobj = ev.target ? ev.target : ev.srcElement;
ssel = false;
if ((firedobj.id == selimg)||(firedobj.id == selid)){
x2 = ev.clientX;
y2 = ev.clientY;
var sx1=x1-left;
var sx2=x2-left;
var sy1=y1-top;
var sy2=y2-top;
document.getElementById("select").innerHTML="Selezionato ("+sx1+
","+sy1+") - ("+sx2+","+sy2+")";
}
}
return false;
}
function init(){
document.onmousedown = startSel;
document.onmouseup = stopSel;
document.onmousemove = moveTheMouse;
sel=document.getElementById("sel");
coord=document.getElementById("coord");
var simg=document.getElementById("selimg");
w=simg.width;
h=simg.height;
}
</script>
</head>
<body onload="init();">
<div id="sel"></div>
<img src="sel.gif" id="selimg"/>
<div id="coord">(0,0) - (0,0)</div>
<div id="select"></div>
</body>
</html>
