Unerwartetes auslösen von onmouseout

[Alike]

Hallo,

ich habe auf folgender Seite ein kleines Problem:

http://test.webreputation.com/index.php?id=1

[zum fortfahren kurz auf die Seite schauen]
Afrika und Russland funktionieren wie gewollt. Beim auswählen der europäischen Länder wäre die ganze Sache auf die gleiche Weise etwas fummelig.
Daher gibt es das detailfenster, welches durch ein mouseover in der imagemap angezeigt wird. Dort werden auch per Imagemap Bereiche hervorgehoben

Das eigentlich Problem ist aber nun, dass beim mouseoverevent(und nur da) der einzelnen areas im detailbereich, merkwürdigerweise auch das mouseout des img's ausgelöst wird. Dadurch entsteht bei deutschladn das flackern(darunter liegt ja direkt europa, wodurch das detailfenster wieder aufgeht) bei england und spanien allerdings(die ausserhalb europas liegen) bleibt das detailfenster geschlossen.

Kann mir da irgendwer weiter helfen, wo der denk-/struktur-/skriptfehler liegt?

Mfg,

alike

[Alexander (HH)]

Moin Moin!

Kann mir da irgendwer weiter helfen, wo der denk-/struktur-/skriptfehler liegt?

Event Bubbling?

Alexander

[alike]

Event Bubbling?

Wenn ichs richtig verstanden hab, tritt Event-Bubbling nur bei Verschachtelung auf. Ist ja bei meinem Problem nicht der Fall. onMouseOut ist im img-Tag und die onMouseOver sind im map-Tag. Weiterhin gilt das Bubbling ja nur für gleiche Events. Wie man auf der Seite aber sieht, tritt das "flackern"(verschwinden des detailfensters) beim mouseOver über ein Detailbereich, während das detailfenster aber durchs mouseOut verborgen wird.

Also hab ich beim Bubbling entweder etwas total missverstanden, oder übersehen?

[molily]

Wenn ichs richtig verstanden hab, tritt Event-Bubbling nur bei Verschachtelung auf.

Jein, bei Image-Maps gibt es eine Anomalie in manchen Browsern.

IE (getestet mit Version 8) feuert beim Mouseover beim area-Element auch ein Mouseover beim map (soweit klar wegen Bubbling), aber auch eines beim zugehörigen img-Element - auch wenn dies aus Sicht des DOM-Elementenbaum kein Vorfahrenelement ist. Dasselbe gilt beim Mouseout.

Beim Fahren mit der Maus auf das Bild und dann auf eine Area und wieder zurück von der Area und vom Bild werden folgende Events gefeuert:

IE 8:

mouseover IMG IMG
mouseout IMG IMG
mouseover AREA AREA
mouseover MAP AREA
mouseover IMG AREA
mouseout AREA AREA
mouseout MAP AREA
mouseout IMG AREA
mouseover IMG IMG
mouseout IMG IMG

Firefox 3:

mouseover IMG IMG
mouseout IMG IMG
mouseover AREA AREA
mouseover MAP AREA
mouseout AREA AREA
mouseout MAP AREA
mouseover IMG IMG
mouseout IMG IMG

Das erste ist das verarbeitende Element (this), das zweite das Zielelement (eventObjekt.target bzw. im IE eventObjekt.srcElement), siehe.

Vielleicht hilft dir das, irrelevante Events herauszufiltern, indem du die besagten Event-Eigenschaften abfragst.

Gegebenenfalls ist es auch sinnvoll, weitere Prüfungen einzubauen, nämlich von welchem Element die Maus beim Mouseover kommt und zu welchem sie geht beim Mouseout. Folgendes Beispiel demonstriert so eine Abfrage, um nicht relevante Mouseover- und Mouseout-Ereignisse herauszufiltern.
http://molily.de/temp/mouseenter-mouseleave.html

Mathias

[alike]

Danke für die Aufklärung. Werde mir das mal genauer anschauen.
Für den Moment hab ich das mouseout des Img erstmal weggelassen.
Das Fenster wird nun durch ein Click auf eine zusätzliche area geschlossen.

aufjednefall helfen mir beide Antworten schonmal für sicherlich folgende Probleme:)