(Stand: 22.12.24, Adresse: http://www.grammiweb.de/anleitungen/ka_rollover.shtml)
Roll-Over-Grafiken einbauen
Sicherlich sind Ihnen auch schon Grafiken unter den Mauszeiger gekommen, die beim Überfahren mit eben diesem ihr Aussehen ändern. Diese so genannten "Roll-Over"-Grafiken bestehen aus meist zwei einzelnen Bilddateien sowie einigen Zeilen JavaScript und ermöglichen den übersichtlichen Aufbau von Navigationsmenüs mit eingebautem Hinguckeffekt. In dieser Anleitung wollen wir uns dem Aufbau dieser Blickfänger widmen.
Erste Grundvoraussetzung sind mindestens zwei Grafiken, die die gleichen Abmessungen aufweisen sollten (in unserem Beispiel verwenden wir 60x40 Pixel). Diesen Grafiken geben wir die Dateinamen "roll1.gif" und "roll2.gif". Übrigens können Sie auch Dateien in anderen Formaten wie z. B. .JPG verwenden, animierte .GIF-Bilder stellen ebenfalls kein Problem dar.
|
|
|
| roll1.gif | roll2.gif | Ergebnis |
Nachdem die beiden Grafiken erstellt, benannt und in ein Verzeichnis Ihrer Wahl kopiert wurden, gehen wir nun zum Herzstück des Effekts über: Dem JavaScript. Dieses wird in den HEAD-Bereich der Internetseite implementiert, also innerhalb der Tags <HEAD> und </HEAD>.
Den dem Auswechseln der Grafiken zu Grunde liegenden JavaScript-EventHandler "onMouseOver" unterstützen aktuelle Browser ab spätestens der 4. Generation (Netscape Navigator auch ab Version 3.0), wodurch nahezu alle Besucher in der Lage sein sollten, den Effekt erleben zu können (von den Surfern abgesehen, die die JavaScript-Option des Browsers deaktiviert haben). Um trotzdem auf die Eventualität älterer Browser einzugehen, wird im Script erst einmal die Browserversion abgefragt.
<script
language="JavaScript">
<!--
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0)
{ rollover = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" &&
browser_version >= 4.0)
{ rollover = 'true'; }
else { rollover = 'false'; }
Mit diesen Zeilen wird ermittelt, ob der Browser des Besuchers die richtige Version aufweist. Ist dies der Fall, wird der Variable "roll-over" der Wert "true", also "wahr", zugewiesen. Andernfalls erhält die Variable den Wert "false", also "unwahr".
Sollte der Roll-Over-Effekt möglich sein, also die Variable "roll-over" den Wert "true" enthalten, werden mit den folgenden Zeilen die einzelnen Grafiken in den Cache des Browsers geladen, um so direkt "griffbereit" zu sein, wenn sie benötigt werden:
if (rollover == 'true') {
grafik1=new Image();grafik1.src="roll1.gif";
grafik2=new Image();grafik2.src="roll2.gif";
}
function rein1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } }
function raus1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } }
//-->
</script>
Damit ist die "Maschine" zum Wechsel der Grafiken bereits fertiggestellt. Es fehlt nun nur noch der Aufruf des Effekts, den Sie innerhalb des BODY-Bereichs, also zwischen den Tags <BODY> und </BODY>, an der Stelle, an der die Grafik erscheinen soll, integrieren.
<a href="ziel.htm"
onMouseOver="rein1('platzhalter1',grafik2.src);"
onMouseOut="raus1('platzhalter1',grafik1.src);">
<img src="roll1.gif" width="60" height="40" border="0"
name="platzhalter1" alt="Es klappt"
>
</a>
Dieser Aufruf erfolgt in Form eines Hyperlinks, wobei eine Grafik als Auslöser dient. Diese Grafik erhält den Namen "platzhalter1". Die Eventhandler "onMouseOver" und "onMouseOut" ersetzen dann beim Berühren mit dem Mauszeiger bzw. bei Nichtberühren eben diese benannte Grafik mit den Grafiken, die im JavaScript vorgegeben wurden. Hierbei sollten Sie noch darauf achten, dass die Breite ("width") und die Höhe ("height") der Grafik angegeben werden. Die Grafik kann wie jede andere behandelt werden, es können also ein Rahmen ("border") und auch ein alternativer Text zugewiesen werden (in unserem Beispiel wird "Es klappt" angezeigt, wenn der Mauszeiger kurz über der Grafik verweilt).
Zum Abschluss noch mal das komplette Script:
<!-- HEAD-Bereich -->
<script
language="JavaScript">
<!--
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0)
{ rollover = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" &&
browser_version >= 4.0)
{ rollover = 'true'; }
else { rollover = 'false'; }
if (rollover == 'true') {
grafik1=new Image();grafik1.src="roll1.gif";
grafik2=new Image();grafik2.src="roll2.gif";
}
function rein1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } }
function raus1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } }
//-->
</script>
<!-- BODY-Bereich -->
<a href="ziel.htm"
onMouseOver="rein1('platzhalter1',grafik2.src);"
onMouseOut="raus1('platzhalter1',grafik1.src);">
<img src="roll1.gif" width="60" height="40"
border="0"
name="platzhalter1" alt="Es klappt"
>
</a>
© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 22.12.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt