<
html>
<head>
<script type="text/javascript" >
var isDown = false;
var posLeft = 0;
var posTop = 0;
var posRight = 0;
var posBottom = 0;
function setRoam(id,left,top,width,height){
document.getElementById(id).style.left = left;
document.getElementById(id).style.top = top;
document.getElementById(id).style.width = width;
document.getElementById(id).style.height = height;
}
function startRoam(evt,id){
var sender = evt.target.id;
var diffX = 0;
var diffY = 0;
if(sender == id){
var roamdiv = document.getElementById(sender);
diffX = roamdiv.offsetLeft;
diffY = roamdiv.offsetTop;
}
document.getElementById("ausgabe").textContent = sender+"|"+id+"|"+(sender==id)+"|"+(evt.x || evt.layerX)+"+"+diffX +"|"+(evt.y || evt.layerY)+"+"+diffY;
startX=(evt.x || evt.layerX)+diffX;
startY=(evt.y || evt.layerY)+diffY;
posLeft = startX
posRight= startX;
posTop=startY;
posBottom=startY;
isDown = true;
setRoam(id,posLeft,posTop,posRight-posLeft,posBottom-posTop);
}
function changeRoam(evt,id){
var sender = evt.target.id;
var diffX = 0;
var diffY = 0;
if(sender == id){
var roamdiv = document.getElementById(sender);
diffX = roamdiv.offsetLeft;
diffY = roamdiv.offsetTop;
}
document.getElementById("ausgabe").textContent = sender+"|"+id+"|"+(sender==id)+"|"+(evt.x || evt.layerX)+"+"+diffX +"|"+(evt.y || evt.layerY)+"+"+diffY;
var tempX=(evt.x || evt.layerX)+diffX;
var tempY=(evt.y || evt.layerY)+diffY;
if(tempX>=startX){
posLeft = startX;
posRight= tempX;
}else{
posLeft = tempX;
posRight = startX;
}
if(tempY>=startY){
posTop =startY;
posBottom=tempY;
}else{
posTop =tempY;
posBottom=startY;
}
if(isDown){
setRoam(id,posLeft,posTop,posRight-posLeft,posBottom-posTop);
}
}
function endRoam(evt,id){
if(isDown){
setRoam(id,posLeft,posTop,posRight-posLeft,posBottom-posTop);
}
isDown=false;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="ausgabe" style="position:absolute;top:100px;left:10px;width:200px;height:50px;"></div>
<div id="feld1"
style="
background-image:
url(feld.jpg);
position:absolute;
left:200px;
top:200px;
width:400px;
height:300px;"
onmousedown="startRoam(event,'roam1');"
onmousemove="changeRoam(event,'roam1');"
onmouseup="endRoam(event,'roam1');">
<div
style="position:absolute; top:210px;left:210px;height:50px;width:40px;background:red"
id="roam1"
onmousedown="startRoam(event,'roam1');"
onmousemove="changeRoam(event,'roam1');"
onmouseup="endRoam(event,'roam1');"></div>
</div>
</td>
<td></td>
</tr>
</table>
</body>
</
html>