nicht angemeldet
Selfhtml-Code ''Dyn. grafische Buttons'' funzt nicht richtig.
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
-
Ei guude wie?
Kann mir jemand helfen? Bitte!
Yep, die Sache ist eigentlich ganz einfach: Das Array images[n] addressiert _alle_ Bilder auf Deiner Seite, also nich nur die, die Du mit Mouse-Events versehen hast. Da images[0] Dein Logo-Bild ist, wird dieses getauscht. Du musst also einfach jeweils das erste Argument beim Aufruf der Funktion Bildwechsel ändern...
LG ausm Hesseland
Lemmy--
Realität ist die Illusion, die durch ein zu geringes Maß an Alkohol entsteht...-
Erstmal Danke für die schnelle Antwort!
Hab vorhin selbst mal die Adressierung geändert, klappt dann auch wunderbar aber das ist alles umständlich. Was wäre wenn ich wieder ein Pic einfüge? Nein nein nein, so nicht! Ich hab jetzt den Code vom Dreamweaver genommen, das klappt auch super.
Trotzdem Danke!
-
http://selfhtml.teamone.de/javascript/objekte/images.htm#allgemeines
"Grafikobjekte können Sie auf zwei Arten ansprechen"
-
Hallo!
Hab vorhin selbst mal die Adressierung geändert, klappt dann auch wunderbar aber das ist alles umständlich. Was wäre wenn ich wieder ein Pic einfüge? Nein nein nein, so nicht!
Dann übergib nicht die Nummer, sondern den Namen des Bildes. Zuerst gib jedem Bild mit <img name="blabla"> einen Namen und dann übergebe "blabla" für den Bilderwechsel. Das klappt auch. (images ist sowohl indiziert als auch »assoziativ«)
Ich hab jetzt den Code vom Dreamweaver genommen, das klappt auch super.
Du willst diesen Codemüll wirklich verwenden? Dreamweaver produziert (nach Frontpage) das schlimmste, was ich bisher gesehen habe.
Christian
--
Ich bitte darum, dass ein Themenbereich (BARRIEREFREIHEIT) eingerichtet wird.
-
-