nicht angemeldet
Hallo,
und wie lese ich die relative position des bildes im window aus?
Mit offsetTop http://selfhtml.teamone.de/javascript/objekte/all.htm#offset_top und offsetLeft http://selfhtml.teamone.de/javascript/objekte/all.htm#offset_left.
<img src="..." name="bild">
document.images['bild'].offsetLeft bzw. document.images['bild'].offsetTop
Wie du Mauskoordinaten abfragst, findest du auf http://evolt.org/article/Mission_Impossible_mouse_position/17/23335/, unten in den Kommentaren.
Kombiniert könnte das etwa so aussehen:
function klickkoordinaten (e) {
posx=0; posy=0;
if (!e) var e=window.event;
if (e.pageX && e.pageY) {
posx=e.pageX;
posy=e.pageY;
} else
if (e.clientX && e.clientY) {
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
bildposx=0; bildposy=0;
if ( typeof(document.images['bild'].offsetLeft)=='number' && typeof(document.images['bild'].offsetTop)=='number' ) {
bildposx=document.images['bild'].offsetLeft;
bildposy=document.images['bild'].offsetTop;
if ( bildposx>0 && bildposy>0 ) {
diffx=posx-bildposx;
diffy=posy-bildposy;
window.alert(posx+' / '+posy+'\n'+bildposx+' / '+bildposy+'\n'+diffx+' / '+diffy);
// diffx und diffy sollten die gesuchten Werte enthalten
}
}
}
window.onload=function () {
document.images['bild'].onclick=klickkoordinaten;
}
<img src="..." name="bild">
Im MSIE 6 im standardkonformen Rendermodus muss das body-Element margin:0 haben, damit scrollLeft und scrollTop die richtigen Werte liefern. Die abstände lassen sich problemlos über padding realisieren.
Opera 5 und 6 liefern 0 für document.images['bild'].offsetTop 0, aber würde für das Blockelement darüber über getElementById den richtigen offsetTop-Wert liefern, sofern das Bild sich direkt an dessen obere Kante anschließt.
Im Netscape 4 sollte es prinzipiell auch gehen, wenn das Bild position:relative hat und es über document.layers[0] angesprochen wird. Die Mauskoordinaten sind dann über event.x und event.y auslesbar, die Bildposition über event.target.x und event.target.y. Der Event wird mit document.layers[0].captureEvents(Event.CLICK); aktivierbar, wobei ich es nur mit onmousemove nachvollziehen konnte, der Klick löst komischerweise nicht den Event aus. Da müsstest du herumprobieren.
Mathias