onMouseover / onMouseout
JCM
- javascript
Hallo Leute,
ich habe folgendes Problem:
das script was ich geschrieben hab ist von einem fotoalbum und zeigt einen pfeil links oder rechts vom bild an je nachdem auf welcher seite man sich befindet und ermöglicht so das schnelle switchen zwischen den bilder(in der großansicht)
der balken mit den pfeilen (links/rechts) erscheint als bild über dem eigentlichen großen bild, funktioniert ja auch alles bis auf wenn ich mit dem zeiger über dem pfeil bin dann fängt das Bild an zu blincken und ist immer wieder mal weg..(das bild vom pfeil)
anscheinden geht der befehl onmouseout los wenn ich über den pfeil gehe, kann mir jmd sagen wo mein fehler ist?
das JS script:
function mouseover(event, width, page, Bild, Ordner, noimg) {
var posy = event.clientY;
var posx = event.clientX;
var y = posy - 250;
if (window.innerWidth) {
var w = window.innerWidth;
} else if (document.body && document.body.offsetWidth) {
var w = document.body.offsetWidth;
} else { var w = "0";}
var x = posx - (((w-900)/2)+20);
var grenze = width/2;
if(grenze < x) {
if(noimg != 'r') {
if(document.getElementById('rechts').innerHTML == "") {
show_img('rechts');
del_img('links');
document.getElementById("newimg").setAttribute("href", "show_img.php5?Ordner=" + Ordner + "&Bild=" + (parseInt(Bild)+1) + "&page=" + page, 0);
}
}
} else {
if(noimg != 'l') {
if(document.getElementById('links').innerHTML == "") {
show_img('links');
del_img('rechts');
document.getElementById("newimg").setAttribute("href", "show_img.php5?Ordner=" + Ordner + "&Bild=" + (parseInt(Bild)-1) + "&page=" + page, 0);
}
}
}
}
function mouseout() {
del_img('links');
del_img('rechts');
document.getElementById("newimg").setAttribute("href", "", 0);
}
function show_img(richtung) {
document.getElementById(richtung).innerHTML = "<img border=\"0\" src=\"Bilder/" + richtung + ".GIF\">";
}
function del_img(richtung) {
document.getElementById(richtung).innerHTML = "";
}
und der html-code an der relevanten stelle:
<div style="position:absolute; top:200px; left:20px; width:800px;">
<a href="gallerie.php5?Ordner=09_05_22_JDI&page=0">zurück zur Übersicht</a>
<div style="position:absolute; top:0px; left:0px;" onmousemove="javascript:mouseover(event, '800', '0', '1', '09_05_22_JDI', '');" onmouseout="javascript:mouseout();">
<a href="" id="newimg">
<img border="0" style="position:absolute; left:0px; top:50px; width:800px;" src="Alben/09_05_22_JDI/1_gross.JPG">
</a>
<div id="links" style="position:absolute; top:101.40625px; left:0px;"></div>
<div id="rechts" style="position:absolute; top:101.40625px; left:770px;"></div>
</div>
</div>
LG, und danke schonmal im vorraus
Jonathan
Hi,
anscheinden geht der befehl onmouseout los wenn ich über den pfeil gehe,
Der Event mouseout tritt auch dann ein, wenn du den Mauszeiger über ein Nachfahrenelement bewegst, ja.
MfG ChrisB
gibt es denn irgendeine lösung das eben dies nicht passiert, bzw. das bild halt da bleibt?
Hi,
gibt es denn irgendeine lösung das eben dies nicht passiert, bzw. das bild halt da bleibt?
Abfragen, wohin die Maus bewegt wird, wenn mouseout eintritt - und darauf entsprechend reagieren.
Manche Browser kennen auch schon Events wie mouseenter/mouseleave; und einige der gängigen Frameworks simulieren sie wohl für andere Browser.
MfG ChrisB
Ja mit onmouseleave würde es unter IE funktionieren wie ichs will, aber eben nur unter IE weil kein anderer browser diesen befehl kennt :S
und eine website sollte ja nicht nru auf einem browser gut/fehlerfrei laufen.
Hi,
Ja mit onmouseleave würde es unter IE funktionieren wie ichs will, aber eben nur unter IE weil kein anderer browser diesen befehl kennt
Gewöhne dir bitte ab, alles mögliche als "Befehl" zu bezeichnen.
und eine website sollte ja nicht nru auf einem browser gut/fehlerfrei laufen.
Alternativen finden sich im Netz, bspw. hier: http://www.quirksmode.org/js/events_mouse.html
MfG ChrisB
Gewöhne dir bitte ab, alles mögliche als "Befehl" zu bezeichnen.
wieso sind das keine befehle?? wie nennt mans dann^^
hab jetzt auch ne lösung:
function containsDOM (container, containee) {
var isParent = false;
do {
if ((isParent = container == containee))
break;
containee = containee.parentNode;
}
while (containee != null);
return isParent;
}
function checkMouseLeave (element, evt) {
if (element.contains && evt.toElement) {
return !element.contains(evt.toElement);
}
else if (evt.relatedTarget) {
return !containsDOM(element, evt.relatedTarget);
}
}
und dann:
onmouseout="javascript:if(checkMouseLeave(this, event)) {mouseout();}"
statt nur mouseout...
danke!!!!
Hallo,
Jaja, mouseout kann ganz schön knifflig sein.
Ich dabe mir da auch einen Workaround basteln müssen:
if (vollmondOderSo() || wasserUhr.match(primzahlExp) || (eheFrau.hatMigräne && freundin.istSauer) ){ try{computerWeitwurf()} catch{tellUser('Pech gehabt!')} }
Gruß, Don P