Markus: Selfhtml-Code ''Dyn. grafische Buttons'' funzt nicht richtig.

Beitrag lesen

Hallo,

für ein Menü mit Rollover-Bildern verwende ich den Code aus dem Selfhtml-Teil ''Dynamische grafische Buttons''. Hier der Code von meinem Menü:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texturen Gallerie</title>
<script type="text/javascript">
<!--
/* Wasser, Schnee & Eis */
Normal1 = new Image();
Normal1.src = "images/btn-wasser.jpg";
Highlight1 = new Image();
Highlight1.src = "images/btn-wasser2.jpg";

/* Holz, Kork & Parkett */
Normal2 = new Image();
Normal2.src = "images/btn-holz.jpg";
Highlight2 = new Image();
Highlight2.src = "images/btn-holz2.jpg";

/* Gewebe & Stoffe */
Normal3 = new Image();
Normal3.src = "images/btn-gewebe.jpg";
Highlight3 = new Image();
Highlight3.src = "images/btn-gewebe2.jpg";

/* Erde & Stein */
Normal4 = new Image();
Normal4.src = "images/btn-erde.jpg";
Highlight4 = new Image();
Highlight4.src = "images/btn-erde2.jpg";

/* Ziegeln & Kacheln */
Normal5 = new Image();
Normal5.src = "images/btn-ziegeln.jpg";
Highlight5 = new Image();
Highlight5.src = "images/btn-ziegeln2.jpg";

/* Feuer & Lava */
Normal6 = new Image();
Normal6.src = "images/btn-feuer.jpg";
Highlight6 = new Image();
Highlight6.src = "images/btn-feuer2.jpg";

/* Himmel & Sterne */
Normal7 = new Image();
Normal7.src = "images/btn-himmel.jpg";
Highlight7 = new Image();
Highlight7.src = "images/btn-himmel2.jpg";

/* Organische Muster */
Normal8 = new Image();
Normal8.src = "images/btn-organisch.jpg";
Highlight8 = new Image();
Highlight8.src = "images/btn-organisch2.jpg";

/* Technologische Muster */
Normal9 = new Image();
Normal9.src = "images/btn-technologisch.jpg";
Highlight9 = new Image();
Highlight9.src = "images/btn-technologisch2.jpg";

/* Künstlerische Muster */
Normal10 = new Image();
Normal10.src = "images/btn-kuenstlerisch.jpg";
Highlight10 = new Image();
Highlight10.src = "images/btn-kuenstlerisch2.jpg";

/* Animationen */
Normal11 = new Image();
Normal11.src = "images/btn-animationen.jpg";
Highlight11 = new Image();
Highlight11.src = "images/btn-animationen2.jpg";

/* eMail */
Normal12 = new Image();
Normal12.src = "images/btn-email.jpg";
Highlight12 = new Image();
Highlight12.src = "images/btn-email2.jpg";

/* Gästebuch */
Normal13 = new Image();
Normal13.src = "images/btn-gaestebuch.jpg";
Highlight13 = new Image();
Highlight13.src = "images/btn-gaestebuch2.jpg";

/* Links */
Normal14 = new Image();
Normal14.src = "images/btn-links.jpg";
Highlight14 = new Image();
Highlight14.src = "images/btn-links2.jpg";

function Bildwechsel(Bildnr,Bildobjekt) {
 window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
</head>
<body background="images/background1.jpg">

<p align="center">
<a href="http://texturen.vrmlwelt.de/" target="_top"><img src="images/logo2.jpg" border="0" alt=""></a><br>
</p>

<p align="center">
<a href="wasser.html" target="rechts" onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)"><img src="images/btn-wasser.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="holz.html" target="rechts" onMouseOver="Bildwechsel(1,Highlight2)" onMouseOut="Bildwechsel(1,Normal2)"><img src="images/btn-holz.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="gewebe.html" target="rechts" onMouseOver="Bildwechsel(2,Highlight3)" onMouseOut="Bildwechsel(2,Normal3)"><img src="images/btn-gewebe.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="erde.html" target="rechts" onMouseOver="Bildwechsel(3,Highlight4)" onMouseOut="Bildwechsel(3,Normal4)"><img src="images/btn-erde.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="ziegeln.html" target="rechts" onMouseOver="Bildwechsel(4,Highlight5)" onMouseOut="Bildwechsel(4,Normal5)"><img src="images/btn-ziegeln.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="feuer.html" target="rechts" onMouseOver="Bildwechsel(5,Highlight6)" onMouseOut="Bildwechsel(5,Normal6)"><img src="images/btn-feuer.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="himmel.html" target="rechts" onMouseOver="Bildwechsel(6,Highlight7)" onMouseOut="Bildwechsel(6,Normal7)"><img src="images/btn-himmel.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="organisch.html" target="rechts" onMouseOver="Bildwechsel(7,Highlight8)" onMouseOut="Bildwechsel(7,Normal8)"><img src="images/btn-organisch.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="technologisch.html" target="rechts" onMouseOver="Bildwechsel(8,Highlight9)" onMouseOut="Bildwechsel(8,Normal9)"><img src="images/btn-technologisch.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="kuenstlerisch.html" target="rechts" onMouseOver="Bildwechsel(9,Highlight10)" onMouseOut="Bildwechsel(9,Normal10)"><img src="images/btn-kuenstlerisch.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="animationen.html" target="rechts" onMouseOver="Bildwechsel(10,Highlight11)" onMouseOut="Bildwechsel(10,Normal11)"><img src="images/btn-animationen.jpg" width="200" height="25" border="0" alt=""></a><br>
</p>

<p align="center">
<a href="mailto:info@vrmlwelt.de?subject=Texturen Gallerie&body=Name: eMail: Homepage: Text:" target="rechts" onMouseOver="Bildwechsel(11,Highlight12)" onMouseOut="Bildwechsel(11,Normal12)"><img src="images/btn-email.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="#" target="rechts" onMouseOver="Bildwechsel(12,Highlight13)" onMouseOut="Bildwechsel(12,Normal13)"><img src="images/btn-gaestebuch.jpg" width="200" height="25" border="0" alt=""></a><br>
<a href="links.html" target="rechts" onMouseOver="Bildwechsel(13,Highlight14)" onMouseOut="Bildwechsel(13,Normal14)"><img src="images/btn-links.jpg" width="200" height="25" border="0" alt=""></a><br>
</p>

</body>
</html>

Ich kann keinerlei Fehler im Code entdecken, trotzem passiert etwas merkwürdiges: Die Bilder werden von unten nach oben ausgetauscht. Beispielsweise wird das Logo-Bild durch das Highlightning-Bild ''Wasser, Schnee & Eis'' (btn-wasser2.jpg) asugetauscht. Das komische daran: Das Logo steht in keinerlei Beziehung zum JS-Code und den Rollover-Bildern. Das Problem besteht in Opera und MSIE, im Netscape hab ichs net getestet!

Kann mir jemand helfen? Bitte!

Bye, Markus