nicht angemeldet
hallo..
ich habe vor kurzem angefangen ein neues programm zu schreiben, mit dem ich über den browser bilder bearbeiten kann. zur visuellen darstellung, bessergesagt, für die vereinfachung der aktionen benütze ich javascript. dabei habe ich zur zeit ein problemkind: erstellen eines auswahlbereiches auf einem bild.
das problem resultiert dabei hauptsaechlich daraus, dass ich, nachdem ich eine aktion mittels "onmousemove" starte, diese nicht mehr stoppen kann. in javascript dokus habe ich dafür auch keine lösung gefunden. wenn dies also irgendwie möglich ist, ist der rest dieses beitrages wahrscheinlich uninteressant, da das problem gelöst waere :o)
nun zur detailierten beschreibung:
ich habe ein bild, das mittels <input type=image> darstelle. (könnte genauso gut <img src.. > nehmen)
darauf soll der benützer mittels klicken und ziehen (auf einem beliebigen punkt über dem bild) ein auswahlrechteck erstellen können.
dafür habe ich zunaechst einen unsichtbaren <div> bereich, sagen wir Layer1 (1px x 1px).
bei gedrückter maustaste startet die funktion showLayer(), die den Layer1 ersmal sichtbar macht und bei einer mouse bewegung die weitere funktion draw() aufruft.
draw() macht nichts anderes als die breite und höhe des Layer1 mit der mouse-coordinaten gleich zu setzen, also die auswahl zu erstellen.
bei losgelassener mousetaste sollte die funktion fix() aufgerufen werden, die wiederum die letzten coordinaten des mousezeigers dem Layer1 zuweisen soll.
<input type="image" src="testimg.jpg" style="cursor:crosshair" onmousedown="showLayer();" onmouseup="fix();">
somit sollte in der theorie ein auswahlrechteck erstellt werden.
habe ich bisjetzt einen denkfehler ?
denn, die praxis zeigt, dass Layer1 einfach nicht fix-bleibt, sondern in der höhe und breite der mouse weiter folgt. onmousemove wird einfach nicht mehr gestoppt, und die bedingung onmouseup zeigt keine wirkung.
kann mir jemand sagen warum das so ist, bzw. ob es eine lösung dafür gibt?
zur lösung dieses problems habe ich bisschen improvisiert und -wie man aus dem unteren code entnehmen kann- 2 div bereiche eingesetzt: (so wie unten dargestellt kann ich zwar ein rechteck erstellen, aber nicht immer; und es traten weitere probleme auf)
<input type="image" src="testimg.jpg" style="cursor:crosshair" onmousedown="showLayer();" onmouseup="hideLayer();">
function showLayer()
{
document.getElementById('layer3').style.visibility = "hidden";
x = window.event.offsetX;
y = window.event.offsetY;
document.getElementById('layer2').style.left = x;
document.getElementById('layer2').style.top = y;
document.getElementById('layer3').style.left = x;
document.getElementById('layer3').style.top = y;
document.getElementById('layer2').style.visibility = "visible";
document.onmousemove = draw;
document.onmouseup= hideLayer;
document.onmouseup = fix;
}
function draw()
{
h= window.event.offsetX;
i= window.event.offsetY;
x = h- parseInt(eval('document.getElementById("layer2").style.left'));
y = i- parseInt(eval('document.getElementById("layer2").style.top'));
if (x<0) x = h;
if (y<0) y = i;
document.getElementById('layer2').style.width = parseInt(x);
document.getElementById('layer2').style.height = parseInt(y);
}
function hideLayer()
{
document.getElementById('layer2').style.visibility = "hidden";
}
function fix()
{
h= window.event.clientX;
i= window.event.clientY;
x = h- parseInt(eval('document.getElementById("layer2").style.left'));
y = i- parseInt(eval('document.getElementById("layer2").style.top'));
if (x<0) x = h;
if (y<0) y = i;
document.getElementById('layer3').style.width = x;
document.getElementById('layer3').style.height = y;
document.getElementById('layer3').style.visibility = "visible";
}
der code ist bisjetzt recht umstaendlich ich weiss; aber noch ist alles in der testphase, deswegen bitte ich um verstaendnis :-)
(PS: es genügt, -vorerst mal- wenn das ganze unter IE >6.0 funktioniert. auf netscape, mozilla etc. muss ich -noch- nicht acht nehmen)
bin für jeden vorschlag dankbar.
grüsse,
tufi