JavaScript onmouseover ,,bildtausch,, funktioniert in Chrome,IE nicht...

[dreivier]

Hi

In Firefox funktioniert es aber nicht in Chrome und IE...wahrscheinlich in Opera wohl auch nicht...weiss jemand warum nicht?

<a href="#" onmouseover="document.like.src='images/abc1.jpg'" onmouseout="document.like.src='images/abc2.jpg'">
<img src="images/abc1.jpg" alt="" width="118" height="58" id="like" /></a>

habs...getElementById fehlt..

 

[8utch0r]

Versuch mal:

document.getElementById('like').src

 

[SaxnPaule]

Was ist document.like.src ? Konnte darüber gerade nix finden. Nimm doch einen Selektor und tausche den HTML Content.

Entweder per jQuery oder per document.getElementById

 

[dreivier]

@sax...wenn man im <img name=""... benutzt dann geht es auch ohne ID aber nur mit Firefox und html bis version 4.x..

 

[liKe2k1]

Direktes Pattern:

document.[elementName].attr

Bezieht sich immer auf das NAME Attribute eines HTML Tags. // VERALTET

NEU:

document.getElementsByName('like').attr

In deinem Fall, wie meine Vorredner schon angesprochen haben, hilft dir

document.getElementById('like').src

weiter. Achtung! Groß- & Kleinschreibung bei Javascript beachten!

 

[Reglohln]

Kurze Frage am Rande: Warum per JavaScript?

 

[SaxnPaule]

Stimmt, per CSS mit hover ist eleganter.

 

[dreivier]

Leute, wenn man den ersaten Beitrag sich mal genauer anschaut liesst man...
habs...getElementById fehlt..

 

[Daaron]

Stimmt, per CSS mit hover ist eleganter.

Per CSS das Source-Attribut tauschen? Das klappt nicht. Es gibt zwar Ansätze, die "content", "attr()" und HTML5 Data-Attribute kombinieren, das ist aber alles Mumpitz und funktioniert am Ende doch nicht.

Wenn das Bild aus semantischen Gründen tatsächlich ein <img> ist, dann klappt sauberer Bildwechsel nur per JS. Hier sollte man aber auch einen Preloader verwenden. Überhaupt, man sollte es nicht so machen wie der TE, sondern eine generische Lösung schreiben.

<img src="hauptbild.jpg" alt="Hauptbild-Beschreibung" data-hover="hoverbild.jpg"> <- das ist alles, was ins HTML gehört. So kann man JEDES Bild auf der Seite aufbauen.
Im JS bindet man dann an jedes <img>, dass ein data-hover - Attribut hat, ein Hover-Event für den Bildwechsel. Natürlich muss man src dann irgendwo zwischenlagern, z.B. in einem weiteren Data-Attribut. Und man braucht eben einen Preloader, damits kein Lade-Verzögerung gibt und beim Hovern plötzlich das Bild fehlt.