nicht angemeldet
Hallo,
Eigentlich funktioniert das ganze schon. man kann den zoomfaktor eingeben, anhand von dem wird dann mit document.getElementById('xy').style.width. bzw. height das bild direkt vergrössert oder verkleinert. ich lasse per javascript der maus ein div-objekt folgen, das den ausschnitt markiert. dann bei onclick lese ich die maus-koordinaten aus, übergebe diese samt dem aktuellen grösse des bildes an ein php-skript, mit dem ich dann das bild definitiv vergrössere und zuschneide.
Wenn Du die Maus ohnehin schon beobachtest, dann kannst Du Deine div-Größe dynamisch der Mausposition anpassen. Etwa so:
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
var x = 0;
var y = 0;
var sx = 0;
var sy = 0;
var move = false;
document.onmousemove = mousemove;
function mousemove(e) {
if(e) {
x=e.pageX?e.pageX:e.clientX?e.clientX:0;
y=e.pageY?e.pageY:e.clientY?e.clientY:0;
} else if(event) {
x=event.clientX;
y=event.clientY;
} else {
x=0;
y=0;
}
if (move) {
document.getElementById("clip").style.width=Math.abs(sx-x)+"px";
document.getElementById("clip").style.height=Math.abs(sy-y)+"px";
}
window.status = x + ":" + y;
}
function startclip() {
sx = x;
sy = y;
document.getElementById("clip").style.top=sy+"px";
document.getElementById("clip").style.left=sx+"px";
move = true;
}
function stopclip() {
move = false;
}
//-->
</script>
</head>
<body onmousedown="startclip();" onmouseup="stopclip();">
<div id="Bild" style="position:absolute; top:100px; left:100px; width:400px; height:400px; background-color:#00AEAD;"></div>
<div id="clip" style="position:absolute; top:0; left:0; width:0; height:0; line-height:0; font-size:0; border:1px dotted black;"></div>
</body>
</html>
Das geht nur sinnvoll, wenn man die Maus von links oben nach rechts unten zieht ;-)), bringt allerdings anders herum auch keine Fehler. Es könnte, allerdings aufwendig, noch verbessert werden.
viele Grüße
Axel