onmouseover / onmouseout auf div anwenden

[mot-K]

Hallo,

ich habe folgendes Problem. Ich habe einen animierten Koffer (gif), der sich öffnet, sobald ich mit der Maus in den Div-Bereich, in dem das Bild liegt, gehe. Wenn ich mit der Maus wieder rausgehe, schließt sich der Koffer wieder. Das klappt soweit auch.
Problem ist aber jetzt folgendes: wenn ich in den Div-Bereich gehe, öffnet sich der Koffer und sobald ich mit dem Cursor quasi dann noch über den sich geöffneten Koffer gehe, wiederholt sich die Öffnen-Animation quasi. Das heißt, der Koffer ist offen (weil ich ja mit der Maus in den Div-Bereich gegangen bin) und er öffnet sich dann nochmal, wenn ich über das Bild gehe...
Das würde ich natürlich gerne verhindern. Hier der Quelltext, wär super, wenn mir jemand weiterhelfen könnte :)

<div id="kofferbereich" onmouseover="javascript:images.open.src='pics/koffer_opening.gif'; return false;" onmouseout="javascript:images.open.src='pics/koffer_closing.gif'; return false;">

<img src="pics/koffer_closed.png" id="koffer" name="open" onmouseover="return false;">

</div>

[molily]

Hallo,

Verwende besser die Events mouseenter und mouseleave anstatt mouseover und mouseout.

mouseover- und mouseout-Events steigen auf und lösen daher entsprechende Handler bei Elementen weiter oben im DOM-Elementbaum aus. mouseenter und mouseleave tun das nicht.

<div id="kofferbereich" onmouseover="javascript:images.open.src='pics/koffer_opening.gif'; return false;" onmouseout="javascript:images.open.src='pics/koffer_closing.gif'; return false;">

Sowohl »javascript:« als auch »return false« ist hier unnötig.

<div  
  onmouseeventer="document.images.open.src = 'pics/koffer_opening.gif'"  
  onmouseleave="document.images.open.src = 'pics/koffer_closing.gif'">

Besser wäre es, die Event-Handler mit JavaScript zu registrieren, anstatt sie ins HTML einzubetten:
http://molily.de/js/event-handling-grundlagen.html
http://molily.de/js/event-handling-fortgeschritten.html

Mathias

[quincunx]

Hallo,

onmouseeventer="document.images.open.src = 'pics/koffer_opening.gif'"

onmouseenter="document.images.open.src = 'pics/koffer_opening.gif'"

Da hast du dich verschrieben.

Aber vielleicht hängt sein Problem ja auch an der gif-Animation, wenn die sich wiederholt wiederholt sie sich, also das gif so einstellen, das es nicht endlos läuft.

gruss quincunx

[mot-K]

@Mathias
Erstmal danke für die Antwort!
Das klappt soweit. Gibt es aber eine Möglichkeit, dass die Bilder schon geladen werden, bevor das eigentliche Event startet?

@quincunx
Die gif-Animation wiederholt sich nicht, trotzdem danke :)

[molily]

Hallo!

@Mathias
Erstmal danke für die Antwort!
Das klappt soweit. Gibt es aber eine Möglichkeit, dass die Bilder schon geladen werden, bevor das eigentliche Event startet?

Ja, du kannst sie mit JavaScript vorladen:

var bild = new Image();  
bild.src = 'pics/koffer_opening.gif';

http://de.selfhtml.org/javascript/objekte/images.htm#allgemeines

Der Code wird einfach beim Laden der Seite ausgeführt. Das Bild wird vom Browser heruntergeladen und zwischengespeichert, sodass es direkt sichtbar ist, wenn es dargestellt werden soll.

Mathias

[mot-K]

Hallo!

@Mathias
Erstmal danke für die Antwort!
Das klappt soweit. Gibt es aber eine Möglichkeit, dass die Bilder schon geladen werden, bevor das eigentliche Event startet?

Ja, du kannst sie mit JavaScript vorladen:

var bild = new Image();

bild.src = 'pics/koffer_opening.gif';

  
Danke! Beim div dann einfach den Bildpfads durch 'bild.src' ersetzen?  
  
\--> <div onmouseenter="document.images.open.src = 'bild.src';>

[mot-K]

Hallo!

@Mathias
Erstmal danke für die Antwort!
Das klappt soweit. Gibt es aber eine Möglichkeit, dass die Bilder schon geladen werden, bevor das eigentliche Event startet?

Ja, du kannst sie mit JavaScript vorladen:

var bild = new Image();

bild.src = 'pics/koffer_opening.gif';

>   
> Danke! Beim div dann einfach den Bildpfads durch 'bild.src' ersetzen?  
>   
> --> <div onmouseenter="document.images.open.src = 'bild.src';>  
  
Habs schon, vielen Dank!!!

[molily]

Beim div dann einfach den Bildpfads durch 'bild.src' ersetzen?

--> <div onmouseenter="document.images.open.src = 'bild.src';>

Wenn »bild« eine globale Variable ist, sie z.B. direkt in einem <script>…</script> erzeugt wird, dann kannst du direkt über bild.src auf die URL zugreifen – ohne Anführungszeichen.

'bild.src' ist hingegen ein String (eine Zeichenkette) mit dem Inhalt »bild.src«, das ist nicht der gewünschte Wert.

Siehe auch:
http://de.selfhtml.org/javascript/objekte/images.htm#allgemeines (Bildwechsel-Beispiel etwas weiter unten)
http://de.selfhtml.org/javascript/beispiele/buttons.htm

Das einfache Auswechseln von Bildern ist übrigens auch über CSS möglich. Vergebe einem Element eine feste http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=Breite und http://de.selfhtml.org/css/eigenschaften/positionierung.htm#height@title=Höhe sowie ein http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=Hintergrundbild. Beim :hover auf das Element kannst du das Hintergrundbild ändern.

#kofferbereich { width: 150px; height: 150px; background: url(pics/koffer_closing.gif) no-repeat center; }  
#kofferbereich:hover { background-image: url(pics/koffer_opening.gif); }

Das nur als möglicherweise einfchere Alternativlösung. Ein Vorladen des Bildes mit CSS ist ohne Tricks allerdings nicht möglich.

Grüße
Mathias