Trække firkant hen over billede
Jeg vil lave noget der fungerer ligesom i dette spørgsmål: http://www.eksperten.dk/spm/468308.Det skal bare udvides til at billedet kan ligge i en iframe eller en DIV med stylen overflow:auto, så store billeder ikke bare fylder derudaf.
Det giver bare nogle problemer fordi markeringen og musemarkøren forskydes mere og mere væk fra hinanden efterhånden som man scroller nedad for at placerer nr. 2 punkt.
Hvordan får jeg dette til at fungerer så jeg kan markerer på kryds og på tværs når billedet ligger i en iframe el. en DIV.
Her er min kode indtil nu, hvor billedet lægger i en DIV:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Marker billede</title>
<script type="text/javascript">
m_nede = null;
koord = null;
function musned() {
if (m_nede == null) {
m_nede = new Array(event.clientX, event.clientY);
obj = document.getElementById("markoer");
obj.style.width = "0px";
obj.style.height = "0px";
obj.style.left = event.clientX;
obj.style.top = event.clientY;
}
else {
arr = getPos();
koord = new Array(m_nede[0] - arr[0], m_nede[1] - arr[1], event.clientX - arr[0], event.clientY - arr[1]);
m_nede = null;
}
}
function bevaeg() {
if (m_nede) {
obj = document.getElementById("markoer");
x = event.clientX;
y = event.clientY;
if (x < m_nede[0])
obj.style.left = x;
if (y < m_nede[1])
obj.style.top = y;
obj.style.width = Math.abs(x - m_nede[0]);
obj.style.height = Math.abs(y - m_nede[1]);
}
}
function getPos() {
obj = document.getElementById("bill");
temp = new Array(0, 0);
while (obj.parent != null) {
temp[0] += obj.offsetLeft;
temp[1] += obj.offsetTop;
obj = obj.parent;
}
return temp;
}
</script>
</head>
<body>
<div style="width:535px; height:200px; overflow: auto;">
<img id="bill" src="billede.jpg" style="width: 775px; height: 1063px;" onclick="musned();" onmousemove="bevaeg();" ondragstart="return false;" /><br /><br />
<form onsubmit="if (koord != null) this.koordinater.value = koord.join(', '); else return false;">
<input type="hidden" name="koordinater" value="" />
<input type="submit" value="Send koordinater" />
</form>
<div id="markoer" onclick="musned();" style="position: absolute; left: -100px; top: -100px; width: 0px; height: 0px; background-color: #999999; border: 1px solid black; filter: alpha(opacity=30); -moz-opacity: 0.1"></div>
</div>
</body>
</html>
