Bildwechsel mit DOM

Document Object Modell

Siehe dazu meine Tipps CSS dynamisch ändern. Nachdem man das einigermaßen verstanden hat, kann man sich dieses Beispiel mal anschauen.


<head>
<script language="JavaScript">
<!--
function bildNeu (bild){
document.getElementsByTagName("img")[0].src=bild;
} //-->
</script>
</head>



Bild austauschen

<img src="img/bild3.gif" border="0" width="163" height="240">

<a href="#" onmouseover="bildNeu('img/bild1.gif')" onmouseout="bildNeu('img/bild3.gif')">Bild austauschen </a>

   

Erläuterung:
Wie man hier sieht ist es viel einfacher als die alte Methode. Da das Bild, welches hier geändert wird das erste Bild auf der Seite ist hat es die Nummerierung [0]. Das zweite müsste man mit [1] referenzieren u.s.w.

Es wäre auch möglich eine neue Weite und Höhe für das neue Bild einzugeben, da Weite und Höhe auch nur Attribute des img Tags sind.

document.getElementsByTagName("img")[0].width="100";

----------------------------------------------------
siehe Stefan Münzens Tipps zum DOM in selfhtml


 

Datenschutzerklärung