Rollover script
Jon-Tom
- javascript
Hallo zusammen,
ich habe hier ein kleines Problem, das bestimmt ganz einfach zu lösen ist - wenn man sich mit javascript auskennt.
Mit dem unten angeführten Script möchte ich Rolloverbuttons erstellen. Weiß aber leider nicht, wie ich das Script verändern muss, um noch zusätzliche Buttons mit diesem Rollover-Effekt auszustatten. Wer kann weiterhelfen?
Und läuft dieses Script dann auf jedem Browser gleich?
-----------------------------------------------------------
<script language="JavaScript">
Normal1 = new Image(); Normal1.src = "../button1.gif";
MouseOver1 = new Image(); MouseOver1.src = "../button2.gif";
OnClick1 = new Image(); OnClick1.src="../button3.gif";
function Bildwechsel(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
</head>
<body>
<a href="xy.htm" onMouseOver="Bildwechsel(0,MouseOver1)"
onMouseOut="Bildwechsel(0,Normal1)" onMouseDown="Bildwechsel(0,OnClick1)">
<img src="../button1.gif" border="0" alt="home"></a>
</body>
--------------------------------------------------------
Und noch ´ne Frage:
Erstelle ich mit Dreamweaver Rollovers wird der Cursor beim drüberfahren in Opera (wenn ich direkt von einem Rollover zum anderen fahre) nicht zur Hand. Bei zwischenzeitlichen Wechsel auf einen Nicht Rollover-Bereich, funktioniert es. Ist das etwas Opera-Spezifisches.
Die Rolloverbuttons liegen direkt nebeneinander.
In Firefox + Explorer alles kein Problem.
Vielen Dank im voraus.
Moin
mit
"Bildwechsel(0,MouseOver1)"
wendest du deine Wechselfunktion auf das 1te Bild im body (Nr.0) an, mit "Bildwechsel(1,MouseOver1)" würdst du das 2te Bild ansprechen.
Gruß
rfb
Mit dem unten angeführten Script möchte ich Rolloverbuttons erstellen. Weiß aber leider nicht, wie ich das Script verändern muss, um noch zusätzliche Buttons mit diesem Rollover-Effekt auszustatten.
Definiere einfach weitere Objekte, so, wie es in dem vorliegenden Script bereits getan wird.
<script language="JavaScript">
Bitte so: <script type="text/javascript">
Ich habe den Code mal kommentiert, dann siehst du, was ich meine:
// Definition des ersten Bildwechsels
// Standardgrafik
Normal1 = new Image();
Normal1.src = "../button1.gif";
// Mouseover-Grafik
MouseOver1 = new Image();
MouseOver1.src = "../button2.gif";
// Klick-Grafik
OnClick1 = new Image();
OnClick1.src="../button3.gif";
Das machst du für jeden Rollover-Button, zwecks Unterscheidung hängst du einfach eine fortlaufende Nummer an (also statt Normal1 Normal2 usw.). Schöner fände ich es, wenn du die Daten in einem Array oder Objekt speichern würdest, aber das wäre für den Moment wohl zuviel verlangt, fürchte ich :)
<a href="xy.htm" onMouseOver="Bildwechsel(0,MouseOver1)"
onMouseOut="Bildwechsel(0,Normal1)" onMouseDown="Bildwechsel(0,OnClick1)">
<img src="../button1.gif" border="0" alt="home"></a>
Dieses Stückchen wiederholst du für jeden Button.
Und läuft dieses Script dann auf jedem Browser gleich?
Teste es einfach.
Erstelle ich mit Dreamweaver Rollovers wird der Cursor beim drüberfahren in Opera (wenn ich direkt von einem Rollover zum anderen fahre) nicht zur Hand. Bei zwischenzeitlichen Wechsel auf einen Nicht Rollover-Bereich, funktioniert es. Ist das etwas Opera-Spezifisches.
Weiß ich nicht, wäre aber denkbar.
Siechfred