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>
<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