onMouseMove
Thomas
- javascript
0 CH0 Hartmut R.
Hi Leute!
Ich möchte gerne einen Layer erscheinen lassen, wenn man über ein Image geht und dieser Layer soll, so lange man sich mit dem Mauszeiger auf dem Layer befindet, an dem Mauszeiger "kleben".
Im IE habe ich es hinbekommen. Wie kann ich das OnMouseMove Event
im Netscape erzeugen bekommen. Ich brauche die Position des Mauszeigers nur zu bekommen, wenn er sich über dem Imagebefindet und nicht permanent.
Ein Beispiel:
im IE shreibe ich einfach:
<script for="Image1" Event="onmousemove()" language="JavaScript">
anzeigen("div1");
</script>
<script language="JavaScript">
function anzeigen(div)
{
document.all[div].style.left=window.event.x+13;
document.all[div].style.top=window.event.y+13;
document.all[div].style.visibility="visible";
}
</script>
und schon wird meine Funktion "anzeigen" so lange ausgeführt, wie ich mich auf dem "Image1" befinde.
wie kann ich dies im Netscape 4.xx und höher realisieren
ich kenne einen weg, aber den kann ich nicht so richtig
umsetzten
in dem man dies macht
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=anzeigen("div1");
natürlich noch die Funktion anzeigen für Netscape optimiert!!
das Problem was da ist, das dieses Event ja für das ganze Document
gilt und ich will das die Funktion nur aufgerufen wird, wenn der User
über das Image geht
Wäre schön wenn ihr mir helfen könnt.
Tschau
Thomas
Hallo!
Es trifft nicht ganz genau das was du willst, aber auf www.jazzhaufen.de ist auf der Startseite etwas ähnliches implementiert. Dort bleiben aber die 'aufpoppenden' Layer noch etwas länger angezeigt als als man mit der Maus über einem Bild ist.
Das sollte dann aber mit einem zusätzlichen onMouseOut="hidePopup(x)" im jeweiligen <img>-Tag ohne weiteres zu lösen sein.
Problem: Es wird immer ein Timeout gesetzt, d.h. wenn du auf dem Image bleibst aber die Mouse nicht bewegst, blendet sich der Layer nach ein paar Sekunden wieder aus. Daraus müsstest du im Code die Timeout-Sachen rausstreichen.
Naja, so der Stein der Weisen ist das nicht, aber ein Ansatz. ;-)
Mfg
Christian Heindl
Hi Thomas
Folgende Funktion im HEAD-Bereich ermittelt die Mausposition:
<script language="JavaScript" type="text/javascript">
<!--
function moveBild(pos){
horiz = pos.layerX;
vert = pos.layerY;
}
//-->
</script>
Folgende Zeilen im BODY-Bereich überwachen im NN die Position:
<script language="JavaScript" type="text/javascript">
<!--
window.document.Layer1.captureEvents(Event.MOUSEMOVE);
window.document.Layer1.onmousemove=moveBild;
//-->
</script>
Der eventhandler im Layer sieht in etwa so aus:
<layer name="Layer1" top="0" left="0"><a href="#" onmousemove="moveBild();" return false"><img src="ingendwas.gif" width="10" height="10" border="0" alt=""></a></layer>
MfG
Hartmut R.