Peggy: zweifacher Bildertausch mit hover

Beitrag lesen

Hallo,
ich versuche mich gerade ein bißchen mit Javascripten zu beschäftigen. Dabei möchte ich eigentlich nur eine recht simple Sache erreichen: eine Leiste mit Buttons (Knöpfen) soll, wenn sie gedrückt werden, einen Bildtausch im selben Fenster erzeugen. Bis dahin bin ich auch schon gekommen (siehe Quellcode unten). Allerdings möchte ich neben dem Rollover-Effekt auch erreichen, dass bei onClick nicht nur das (große) Bild ausgetauscht wird, sondern auch das Button-Bild selbst getauscht wird und somit zeigt, an welcher Stelle in der Bilderleiste man sich befindet. Wenn der nächste Button dann gedrückt wird, soll der vorher gedrückte wieder den ursprünglichen Zustand annehmen und ein neues (großes) Bild geladen werden, aber auch das gerade gedrückte Button getauscht werden. Wer kann mir helfen, mein Script zu vervollständigen? Danke.

<html>
<head>
<title>Bilder</title>
<script type="text/javascript">
<!--
knopf_Normal = new Image();
knopf_Normal.src="knopf.gif";
knopf_Aktiv = new Image();
knopf_Aktiv.src="knopfvoll.gif";

function bild(b) {
  document.b1.src=b
}
//-->
</script>
</head>
<body bgcolor="#CCCCCC">
<table>
<tr>
<td> <td>
<a href="javascript:bild('bild1.jpg')"
onMouseOver="knopf1.src=knopf_Aktiv.src"
onMouseOut="knopf1.src=knopf_Normal.src"
onClick="knopf1.src=knopf_Aktiv.src">
<img src="knopf.gif" name="knopf1" width="20" height="18" border=0>
</a></td>
<td>
<a href="javascript:bild('bild2.jpg')"
onMouseOver="knopf2.src=knopf_Aktiv.src"
onMouseOut="knopf2.src=knopf_Normal.src"
onClick="knopf2.src=knopf_Aktiv.src">

<img src="knopf.gif" name="knopf2" width="20" height="18" border=0>
</a></td>
<td><img src="bild1.jpg" name="b1"></td>
</tr>
</table>
</body>
</html>