[ERLEDIGT] Bildwechsel per Mouseover

[oOLupusOo]

Hiii!
Bin neu im Forum und auch in JavaScript.
Ich habe die Grundlagen gelernt und wollte jetzt selber einiges ausprobieren.
Jedoch funktioniert es einfach nicht.
Hoffentlich kann mir wer helfen.
Es gibt dieses "zerrissene Seite" Wenn ich über das Bild gehe. Mehr nicht.

    <div id="listenpunkte">
               
                 <img src="Bilder/listenpunkt.png"  name="Grafik01"
                OnMouseover = "Wechseln('Grafik01','Tauschbild01b')"
                OnMouseout  = "Wechseln('Grafik01','Tauschbild01a')">                               
                                               
                                               
                                               
                 <a href=""> <img src="Bilder/listenpunkt.png"></a>
                 <a href=""> <img src="Bilder/listenpunkt.png"></a>
                 <a href=""> <img src="Bilder/listenpunkt.png"></a>
                </div>

var Tauschbild01b = new Image();
    Tauschbild01b.src = "Bilder/Listenpunkt2.png";
   
var Tauschbild01a = new Image();
    Tauschbild01a.src = "Bilder/Listenpunkt.png";

function Wechseln(Grafik1,Tauschbild01b){
document.images[Grafik1].src = eval(Tauschbild01b + ".src" )
}

 

[Sempervivum]

eval ist IMO nicht nötig, warum nicht einfach so:

document.images[Grafik1].src = Tauschbild01b.src

 

[oOLupusOo]

Danke für die Antwort! Leider löst das aber mein problem nicht :/

 

[Sempervivum]

Da hast Du Recht, mein Vorschlag war außerdem vorschnell und falsch.
Das Problem ist, dass Du dem Eingangsparameter deiner Funktion denselben Namen gegeben hast wie dem Bildobjekt. Beim eval wird dies ausgewertet:

Tauschbild01b.src

Innerhalb deiner Funktion ist Tauschbild01b jedoch nicht das Bildobjekt sondern der Eingangsparameter vom Typ String und dieser hat kein src-Attribut.
So funktioniert es:

function Wechseln(Grafik1,Tauschbild){
document.images[Grafik1].src = eval(Tauschbild + ".src" )
}

Dennoch bin ich der Meinung, dass man auf das eval verzichten und z. B. der Funktion den Dateinamen des Bildes übergeben sollte.

 

[Sempervivum]

PS: Eine interessante Technik, wie man dies ohne Javascript, nur mit CSS, lösen kann, sind CSS-Sprites:
http://www.w3schools.com/css/css_image_sprites.asp

 

[oOLupusOo]

Kann sein, dass ich gerade was falsches sage.. Aber habe ich nicht genau das geschrieben oben?
Habe das jetzt so, aber jetzt passiert gar nichts mehr.

var Tauschbild01b = new Image();
    Tauschbild01b.src = "Bilder/Listenpunkt2.png";
   
var Tauschbild01a = new Image();
    Tauschbild01a.src = "Bilder/Listenpunkt.png";

function Wechseln(Grafik01, Tauschbild01b){
document.images[Grafik01].src = eval(Tauschbild01b + ".src")
}

<div id="listenpunkte">
               
                 <img src="Bilder/listenpunkt.png"  name="Grafik01"
                OnMouseover = "Wechseln(Grafik01, Tauschbild01b)"
                OnMouseout  = "Wechseln(Grafik01, Tauschbild01b)">                               
                                               
                                               
                                               
                 <a href=""> <img src="Bilder/listenpunkt.png"></a>
                 <a href=""> <img src="Bilder/listenpunkt.png"></a>
                 <a href=""> <img src="Bilder/listenpunkt.png"></a>
                </div>

 

[oOLupusOo]

Ohh Es geht! Wieso muss man den Namen einfach ändern? O.O

function Wechseln(Grafik01, Tauschbild){
document.images[Grafik01].src = eval(Tauschbild + ".src")
}

 

[Sempervivum]

Wieso muss man den Namen einfach ändern?

Habe ich doch versucht, zu erklären:

Das Problem ist, dass Du dem Eingangsparameter deiner Funktion denselben Namen gegeben hast wie dem Bildobjekt. Beim eval wird dies ausgewertet:
Tauschbild01b.src
Innerhalb deiner Funktion ist Tauschbild01b jedoch nicht das Bildobjekt sondern der Eingangsparameter vom Typ String und dieser hat kein src-Attribut.

Man kann auch sagen, der Eingangsparameter verdeckt das globale Bildobjekt.