Rückgabe der Cursorposition

Dabster

Grünschnabel
Hallo Leute

Ich hab hier ein kleines Problem. Auf meiner Webseite sind Grafiken und wenn man auf diese klickt werden diese größer angezeigt. Ich hab dies wie folgt gelöst:

Link auf dem Thumbnail im HTML-Dokument:

Code:
<a onClick="showBILD()">
<img galleryimg="no" border="1" style="border-color:#FFFFFF" src="images/thumbnail.jpg">
</a>

Es befindet sich auch das vergrößerte Bild im HTML-Dokument, das aber von vornherein durch ein CSS-Style versteckt ist:

Code:
<div id="BILD" onClick="hideBILD()">
<img galleryimg="no" border="1" style="border-color:#FFFFFF" src="images/bild.jpg">
</div>

Die Funktionen lauten:

Code:
function showBILD() {
        document.getElementById('BILD').style.left = window.event.clientX-2 ;
        document.getElementById('BILD').style.top = window.event.clientY-2 ;
        document.getElementById('BILD').style.visibility = 'visible'; 
} 

function hideBILD() {
        document.getElementById('BILD').style.visibility = 'hidden';
}

Nun tritt folgendes Problem auf. Wenn ich den Scrollbalken benutze und runterscrolle und dann auf ein Bild klicke erscheint dies viel weiter oben - da wo der cursor wäre wenn ich nicht gescrollt hätte. Also an der Position hinsichtlich zur oberen Ecke des Dokuments. In dem Fall bräuchte ich aber die Position bezogen auf das Anzeigefenster, damit die eigentliche Position nicht verfälscht wird. Wie kann ich das nun lösen?

Danke im Vorraus
Dabster
 
Hmm... Im IE heisst eine Konstante document.body.scrollTop (bin mir aber nicht ganz sicher... Musst mal probieren...), dort ist der wert gespeichert, wieweit du nach unten gescrollt hast... Müsste dein Problem lösen:

PHP:
function showBILD() {
        document.getElementById('BILD').style.left = window.event.clientX-2 ;
        document.getElementById('BILD').style.top = window.event.clientY+document.body.scrollTop-2 ;
        document.getElementById('BILD').style.visibility = 'visible'; 
} 

function hideBILD() {
        document.getElementById('BILD').style.visibility = 'hidden';
}
 

Neue Beiträge

Zurück