[JS] Rollover Effekt geht nur bei einer Grafik, nicht bei zwei

Wie schon in der Überschrift vermerkt funktioniert der Rollover Effekt nicht.

Habe ich nur eine Grafik drin mit dem Rollover Effekt funktioniert das ja auch alles noch. Aber wenn ich eine zweite Grafik dazu mache dann funktiniert das aufeinmal nicht mehr.

bei Prinz:
Mousoverbutton: http://www.dancinghorse.de/hallo/assets/...rinzbutton2.jpg
Mouseout: http://www.dancinghorse.de/hallo/assets/...rinzbutton1.jpg

bei Limit:
Mouseoverbutton: http://www.dancinghorse.de/hallo/assets/...imitbutton2.jpg
Mouseout: http://www.dancinghorse.de/hallo/assets/...imitbutton1.jpg


Hier der Code:

<meta http-equiv="Content-Language" content="de">
<p>&nbsp;<meta http-equiv="Content-Language" content="de">&nbsp;
<p>
</p>
<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="50%"><a href="http://www.dancinghorse.de/hallo/html/prinz.html" onMouseOver="document.button1.src='http://www.dancinghorse.de/hallo/assets/
images/prinzbutton2.jpg'"
OnMouseOut="document.button1.src='http://www.dancinghorse.de/hallo/assets/i
mages/prinzbutton1.jpg'">
<img src="http://www.dancinghorse.de/hallo/assets/images/prinzbutton1.jpg" name="button1" border="0" width="205" height="151"></a></td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td width="50%"><a href="http://www.dancinghorse.de/hallo/html/nolimit.html" onMouseOver="document.button1.src='http://www.dancinghorse.de/hallo/assets/
images/limitbutton2.jpg'"
OnMouseOut="document.button1.src='http://www.dancinghorse.de/hallo/assets/i
mages/limitbutton1.jpg'"><img src="http://www.dancinghorse.de/hallo/assets/images/limitbutton1.jpg" name="button1" border="0" width="205" height="151"></a></td>
<td width="50%">&nbsp;</td>
</tr>
</table>
</center>
</div>
<p>&nbsp;</p>