standard mouseover onmouseover grafik tausch

on-mouseover.de

Standard Mouseover

Der Standard Onmouseover Grafik Tausch.

Häufig sieht man im Web folgenden Tausch der Navigation-Buttons, genannt Mouseover Effekt:


Grafik 1	Grafik 2	Effekt ( mit der Maus drüberfahren )

Dieser Austausch am Beispiel folgender Grafiken


Button 1 knopf.jpg	Button 2 email.jpg	Effekt( mit der Maus drüberfahren ) Button1 wird duch Button2 getauscht.

Quelltext für den Head-Bereich:
(zwischen <head> und </head>)

Die Bilder für den Austausch werden hier vorgeladen und abgelegt, damit diese sofort aus dem Cache geladen werden. Alle für den Mouse-Over-Effekt verwendeten Grafiken müssen hier definiert, d.h. mit der Eigenschaft "src" (source = Quelle) versehen werden. Es hat sich eingebürgert, daß Java-Script in den Head-Bereich zu schreiben. Es kann aber auch im Body-Bereich stehen.( Denn da kopieren es eventuell einige HTML-Editoren auch ungefragt hin ).

Quelltext für den Body-Bereich:
(zwischen <body> und </body>)

Erklärung: Mit" a href" gibt man einen Link an,( hier z.B. ein Email-Link ), mit " img src" fügt man die Grafik ein, die zunächst als Erstes auf dem Monitor erscheint. Bei mir ist das hier die "knopf-Grafik".)Mit "name"vergibt man einen beliebigen Namen ( hier genannt: "austausch1" ), der bei den Befehlen "onmouseover" und "onmouseout" auf die Objekte zugreift.

Bei dem vorstehenden Beispiel wurde davon ausgegangen, dass sich die Grafiken im selben Verzeichnis wie die "HTML-Dateien" befinden.

Die Angaben bei "width" und "height" müssen natürlich den Abmessungen Deiner Grafik entsprechen.

Bitte die kleinen unscheinbaren Apostroph-Zeichen ( ' ) nicht vergessen.

Nehmen wir mal an, die Grafiken befinden sich aber in einem Unterverzeichnis namens "bilder", dann würde das - bei selbigem Beispiel wie folgt aussehen.

Anderes Verzeichnis / Quelltext komplett:

Will man noch weitere Buttons austauschen, so muss man den jeweiligen Grafiken entsprechend wieder mit dem Attribut "name" einen Namen geben ( für eine zweite Grafik z.b. "austausch2") und dann auch mit diesen Namen beim "mouseover-event" auf diese Grafik zugreifen.

Nachfolgend solch ein Beispiel für eine Navigationsleiste. Hier mit kompletten Quelltext.
Diese Navigationsleiste soll aus 4 Grafiklinks bestehen, wobei jeder dieser 4 Links getauscht wird.

Grafiktausch Navigationsleiste / Quelltext komplett:

<html>
<head>
<script
language="JavaScript">
<!--
button1_a= new Image();
button1_a.src = "link01_start.gif"
button1_b= new Image();
button1_b.src = "link01_over.gif"
button2_a= new Image();
button2_a.src = "link02_start.gif"
button2_b= new Image();
button2_b.src = "link02_over.gif"
button3_a= new Image();
button3_a.src = "link03_start.gif"
button3_b= new Image();
button3_b.src = "link03_over.gif"
button4_a= new Image();
button4_a.src = "link04_start.gif"
button4_b= new Image();
button4_b.src = "link04_over.gif"

/* usw. für alle Grafiken,
die am Mouse-Over-Effekt beteiligt sind */

//-->
</script>
</head>

<body>

<a href="beispiel.html" onmouseover="austausch1.src='link01_over.gif';"
onmouseout="austausch1.src='link01_start.gif'"><img src="link01_start.gif"
border="0" width="150" height="30"
name="austausch1"></a>

<a href="beispiel2.html" onmouseover="austausch2.src='link02_over.gif';"
onmouseout="austausch2.src='link02_start.gif'"><img src="link02_start.gif"
border="0" width="150" height="30"
name="austausch2"></a>

<a href="beispiel3.html" onmouseover="austausch3.src='link03_over.gif';"
onmouseout="austausch3.src='link03_start.gif'"><img src="link03_start.gif"
border="0" width="150" height="30"
name="austausch3"></a>

<a href="beispiel4.html" onmouseover="austausch4.src='link04_over.gif';"
onmouseout="austausch4.src='link04_start.gif'"><img src="link04_start.gif"
border="0" width="150" height="30"
name="austausch4"></a>

</body>
</html>

Wie geht es jetzt weiter?

Dieses Standard-Script kann jetzt leicht ausgebaut werden, denn es ist die Basis für weitere Tausch-Möglichkeiten.

Bei geringer Variation ergeben sich vielseitige weitere Effekte - um nur einige zu nennen - wie...

1. Ein Grafiktausch bei Framesets (über Frame-Grenzen hinaus).
» siehe Rubrik "Frame-Mouseover".

2. Es können beliebig viele Grafiken auf einer Seite gewechselt werden, egal an welcher Position sich diese auf der Seite befinden.
Ausserdem: Es können beliebig viele Grafiken gleichzeitig getauscht werden, d.h. nicht nur die Linkgrafik, sondern auch gleichzeitig mit dieser weitere andere Grafiken.
» siehe Rubrik "Mehrfach-Mouseover".

3. Verbindung mit anderen Tausch/Effekten, seien es Textlinks, CSS-Links (Hover-Links), selbstablaufende Dia-Shows, Änderung der Hintergrundfarbe, Einbindung von Gif-Animationen oder Imagemaps usw...usw...

Anmerkung: Einige HTML-Editoren haben Probleme mit Java-Script und kopieren den Quelltext ungefragt an andere Stellen. ( Bei Frontpage wurde dieses erst ab der Version 2000 abgeändert. Im Prinzip macht das nichts, da das Script auch so funktioniert. (Meistens erschwert es aber die Fehlersuch, wenn man sich vertippt hat, und das Script nicht beim ersten Mal wie gewünscht arbeitet.)

Tipp:

Bei Problemen kann man die HTML-Datei, in welcher das JavaScript eingefügt werden soll, auch in einen Texteditor (z.B. Windows-Editor) laden und hier das JavaScript hineinschreiben. ( Zu finden unter: Start / Programme / Zubehör / Editor ). Anschließend abspeichern und im Browser überprüfen.