onmousemove - Bild flackern verhindern

JCM · Sep 1, 2009

Hallo Leute,

ich hab bei meiner internetseite für eine fotogalerie ein js-script geschrieben, womit man wenn man in der großansicht ist einfach je nachdem wo der zeiger ist einb bild vor oder zurückswitchen kann.
je nach dem ob vor oder zurück kommt links oder rechts vom eigentlichen bild, ein halb weiß halb durchsichtiger schmalerbalken, mit einem pfeil in die entsprechende richtung (also links oder rechts).

mein problem ist vollgendes wenn man nun mit dem zeiger über das bild geht was automatisch dahingetan wird(der pfeil nach links/rechts) das fängt dieser an zu flacker und ist mal da mal weg, kann man das i-wie verhindern?

Code:

        function mouseover(event, width, page, Bild, Ordner) {
          var posy = event.clientY;
          var posx = event.clientX;
          var y = posy - 250;
          var x = posx - (((window.innerWidth-900)/2)+20);
          var grenze = width/2;
          //alert(grenze + '_' + x);
          if(grenze < x) {
            show_img('rechts');
            del_img('links');
            document.getElementById("newimg").setAttribute("href", "show_img.php5?Ordner=" + Ordner + "&Bild=" + (parseInt(Bild)+1) + "&page=" + page, 0);
          } else {
            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 = "";
        }

danke im vorraus für eure Hilfe,
lg, JCM

[EDIT]:
hab ne lösung *gg*:
es lag daran das der Event mouseout auch dann eintritt, wenn man den Mauszeiger über ein Nachfahrenelement bewegt...
lösung des problems (welches auch für andere browser gilt als IE sonst könnte man einfach onmouseleave machen):

Code:

        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:

Code:

onmouseout="javascript:if(checkMouseLeave(this, event)) {mouseout();}"

^^

Garavani · Jun 24, 2012

Flackern bei mouseout

Hallo JCM,

das klingt sehr interessant, was Du da gepostet hast.
Leider bin ich blutiger Anfänger und das einfache Einkopieren Deines Codes (Sorry;-) hat nicht gereicht, um auch mein Flacker-Problem zu lösen.
(Weil man da sicher einige spezifische Parameter eingeben muss ;-)
Magst Du mir etwas auf die Sprünge helfen?

In meiner html sind folgende divs:

<div id="Collection" style="blabla" onmouseover="fadeoutCollection();" onmouseout="fadeinAll();"><img src="images/COLLECTION.png"></div>
<div id="Recherche"style="blabla" onmouseover="fadeoutRecherche();" onmouseout="javascript:if(checkMouseLeave(this, event)) {function fadeinAll();}"><img src="images/RECHERCHE.png"></div>
<div id="Corporate" style="blabla" onmouseover="fadeoutCorporate();" onmouseout="fadeinAll();"><img src="images/CORPORATE.png"></div>
<div id="Contact" style="bla" onmouseover="fadeoutContact();" onmouseout="fadeinAll();"><img src="images/CONTACT.png"></div>

Dazu diese Funktionen:

function fadeoutRecherche() {

$('#Collection').fadeOut(680, 'linear');
$('#Corporate').fadeOut(680, 'linear');
$('#Contact').fadeOut(240, 'linear');
}

function fadeoutCollection() {
$('#Recherche').fadeOut(680, 'linear');
$('#Corporate').fadeOut(450, 'linear');
$('#Contact').fadeOut(240, 'linear');
}

function fadeoutCorporate() {
$('#Recherche').fadeOut(680, 'linear');
$('#Collection').fadeOut(240, 'linear');
$('#Contact').fadeOut(680, 'linear');
}

function fadeoutContact() {
$('#Recherche').fadeOut(450, 'linear');
$('#Corporate').fadeOut(680, 'linear');
$('#Collection').fadeOut(240, 'linear');
}

function fadeinAll() {

$('#Recherche').fadeIn(680, 'linear');
$('#Corporate').fadeIn(680, 'linear');
$('#Collection').fadeIn(680, 'linear');
$('#Contact').fadeIn(680, 'linear');
}

Ziel/Idee ist, das beim Hover über eines der divs die drei anderen ausfaden.
Geht ja auch, aber flackert (nur wenn man die Maus nach unten wegbewegt übrigens). Mouseenter/leave geht nicht, liegts am Safari?

Kann ich jetzt Dein kleines Script da irgendwie nutzen?

Danke Dir herzlich im Voraus

Garavani