nicht angemeldet
Clip-Bereich per Drag&Drop ändern
Hallo,
ich suche eine Möglichkeit, den Clipbereich eines Bildes per Drag&drop anzupassen.
Wie bei den diversen Routenplanern, bei dem nur ein Ausschnitt der Karte angezeigt wird, man aber per Drag&drop den Inhalt verschiebt.
Gibts da vielleicht schon Beispiele, die man sich ansehen kann?
Ich bekomm das mit dem Clipping noch nicht so hin:
(Sprich: hab keine Ahnung wie ich die Clipping-Werte verändern muss, damit das Fenster an der selben Stelle steht aber der Inhalt sich ändert)
Wäre toll, wenn mir jemand einen Tip geben könnte.
<script type="text/javascript">
var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;
function draginit() {
document.onmousemove = drag;
document.onmouseup = dragstop;
}
function dragstart(element) {
dragobjekt = element;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
}
function dragstop() {
dragobjekt=null;
}
function drag(ereignis) {
posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
neuposx = posx - dragx;
neuposy = posy - dragy;
dragobjekt.style.clip = "rect( "+neuposx+" 280 210 "+neuposy+" )";
}
}
</script>
</head>
<body onLoad="draginit()">
<img onmousedown="dragstart(this)" id="clipimage" style="position:absolute;top:150;left:150;clip:rect(0 280 210 0)" src="natgeo60.jpg" width="1024" height="768" border="0" alt="">
</body>
</html>
-
Hi,
ich würde das lieber mit einem Wrapper Element, welches overflow:hidden und position:relative (oder absolute) hat.
Das darin positionierte Element kannst du dann verschieben, indem du einfach die left/top Werte änderst. Das Element selber muss dann natürlich auch positioniert sein (relative oder absolute).
Gruß!