Du solltest nicht die Grafik verschieben, sondern ein Parent Element
<div id=map_drag>
<img id=map_img>
<div id=map_labels>
...
</div>
</div>
Eigentlich hätte ich da ja auch drauf kommen können.
Aber jetzt kann ich die Grafik nicht mehr bewegen??
Kannst Du vielleicht einen kurzen Blick auf den eigentlich recht einfachen Code werfen?
Trage ich target.id == "clipimage" ein, bewegt sich das Bild, Mit "clipdiv" passiert aber nichts.
<script type="text/javascript">
var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;
var clipbreite = 600;
var cliphoehe = 400;
function ExtractNumber(value) {
var n = parseInt(value);
return n == null || isNaN(n) ? 0 : n;
}
function $(id) {
return document.getElementById(id);
}
function draginit() {
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
}
function OnMouseDown(e) {
if (e == null) e = window.event;
var target = e.target != null ? e.target : e.srcElement;
if (target.id == "clipdiv") {
if ((e.button == 1 && window.event != null || e.button == 0)) {
posx = e.clientX;
posy = e.clientY;
dragx = ExtractNumber(target.style.left);
dragy = ExtractNumber(target.style.top);
dragobjekt = target;
document.onmousemove = OnMouseMove;
return false;
}
}
}
function OnMouseUp() {
document.onmousemove = null;
dragobjekt = null;
}
function OnMouseMove(e) {
if (e == null) var e = window.event;
wert1 = (dragx + e.clientX - posx);
wert2 = (dragy + e.clientY - posy);
imgx = 1024;
imgy = 768;
if (wert1 > 0) {
wert1 = 0;
}
if (wert2 > 0) {
wert2 = 0;
}
if (wert1 < clipbreite-imgx) {
wert1 = clipbreite-imgx;
}
if (wert2 < cliphoehe-imgy) {
wert2 = cliphoehe-imgy;
}
document.getElementById('debuginfo').innerHTML = "X="+wert1+" Y="+wert2;
dragobjekt.style.left = wert1 + 'px';
dragobjekt.style.top = wert2 + 'px';
}
</script>
</head>
<body onLoad="draginit()">
<div id="clipcontainer" style="position:absolute;top:200;left:200;float: left; width: 600px; height: 400px; overflow: hidden; border: 1px solid black;">
<div id="clipdiv" style="position:relative;top:0;left:0;">
<img style="position:relative;top:0;left:0;" id="clipimage" src="natgeo60.jpg" width="1024" height="768" border="0" alt="">
<div id="label1" style="position:absolute;top:150;left:150;width:10px;height:10px;background:red;"></div>
</div>
</div>
<div id="debuginfo" style="position:absolute;top:150;left:50;border: 1px solid black;">Debuginfo</div>
</body>
</html>