 MouseOver-Beispiel für ein Menü
Tipps zur Arbeitserleichterung und Fehlerreduzierung bei der Realisierung von MouseOver-Buttons für ein Menü.
Die Funktion zum Austausch von Grafiken bei MouseOver und MouseOut wird im Beispiel 'MouseOver-Funktion' erklärt. Hier nun ein Anwendungsbeispiel für ein Menü.
Die Anpassung und Erweiterung des Beispiels wird erleichtert, weil ich bei der Vergabe von Objekt- und Variablennamen logisch durchnummeriert habe.
1) die Dateinamen der Grafiken
2) die Objektnamen der Grafiken
3) die Namen der Tauschbilder
4) die Objektnamen der Buttons
So soll das Ergebnis aussehen:
|
|
Für eine grafische Menüleiste mit MouseOver-Effekt benötigen sie je jeweils zwei gleichartige, farblich unterschiedliche Grafiken für jeden Menüpunkt. Die Event-Handler onMouseOver und onMouseOut überwachen die Mausbewegung. Weil die Event-Handler in einem Verweis notiert sind, wird beim Anklicken das Verweisziel angesteuert (die Seitene aufgerufen).
Hier werden diese 12 Buttons verwendet:
|
  
  
Diese Grafiken können sie als unbeschriftete Buttons in vielen unterschiedlichen Farben als Rohlinge in meiner MINI-IMAGE-BOX herunterladen und bearbeiten.
1) Dateinamen der Grafiken
Bereits bei der Herstellung der Buttons habe ich die Dateinamen der Grafiken nach einer Logik gewählt. Zusammen gehörende Grafiken für den gleichen Menüpunkt haben bei gleichen Bezeichnungen jeweils die Endung 'a' oder 'b'.
Die Dateinamen der Grafiken sind mit festgelegt mit:
button01a.gif - button06a.gif für die normale Ansicht
button01b.gif - button06b.gif für die MouseOver-Ansicht.
2) Objektnamen der Grafiken
Die mit HTML-Anweisungen eingebundenen Button-Grafiken werden als Objekte gesehen. Damit man diese Objekte gezielt ansprechen kann, wird für jeden Button ein Name vergeben.
Auch bei der Vergabe der Objektnamen für die Grafiken habe ich eine logische Folge gewählt und einfach durchnummeriert: menue01 bis menue06.
<img name="menue01" src="button01a.gif" width="150" height="23" border="0">
<img name="menue02" src="button02a.gif" width="150" height="23" border="0">
3) Namen der Tauschbilder
Die für die späteren Tauschaktionen benutzten Grafiken werden bekannt gemacht und vorab geladen. Bei den Anweisungen dazu wähle ich auch dabei Namen, die eine spätere Verwendung vereinfachen: Grafik01a / Grafik01b - Grafik06a / Grafik06b
<script type="text/javascript" language="JavaScript">
<!--
Grafik01a = new Image();
Grafik01a.src = "button01a.gif"; /* Standard-Grafik */
Grafik01b = new Image();
Grafik01b.src = "button01b.gif"; /* Highlight-Grafik */
Grafik02a = new Image();
Grafik02a.src = "button02a.gif"; /* Standard-Grafik */
Grafik02b = new Image();
Grafik02b.src = "button02b.gif"; /* Highlight-Grafik */
Grafik03a = new Image();
Grafik03a.src = "button03a.gif"; /* Standard-Grafik */
Grafik03b = new Image();
Grafik03b.src = "button03b.gif"; /* Highlight-Grafik */
Grafik04a = new Image();
Grafik04a.src = "button04a.gif"; /* Standard-Grafik */
Grafik04b = new Image();
Grafik04b.src = "button04b.gif"; /* Highlight-Grafik */
Grafik05a = new Image();
Grafik05a.src = "button05a.gif"; /* Standard-Grafik */
Grafik05b = new Image();
Grafik05b.src = "button05b.gif"; /* Highlight-Grafik */
Grafik06a = new Image();
Grafik06a.src = "button06a.gif"; /* Standard-Grafik */
Grafik06b = new Image();
Grafik06b.src = "button06b.gif"; /* Highlight-Grafik */
// hier einfach nach Bedarf erweitern
//-->
</script>
Die Funktion Wechseln()
Die Funktion Wechseln() ist identisch mit der Funktion, die bereits auf der Seite 'MouseOver-Funktion' verwendet wird. Erklärungen zur Arbeitsweise finden sie dort.
function Wechseln(Objektname,Tauschbild) {
document.images[Objektname].src = eval(Tauschbild + ".src")
}
Die Menü-Buttons im BODY-Bereich
Für das Menü werden HTML-Notierungen für die Button-Grafiken eingetragen.
<img src="button01a.gif" width="150" height="23" ... >
Zur Überwachung von Maus-Aktionen werden zusätzlich die Event-Handler für onMouseOver / onMouseOut mit dem Funktionsaufruf für "Wechseln()" eingetragen.
Für jede eingefügte Grafik (Button) wird ein (anderer) Name eingetragen.
4) Objektnamen der Buttons
Als Namen trage ich hier wiederum Bezeichnungen mit fortlaufender Nummer ein!
Button 1
<a href="dateiname.htm"
OnMouseOver="Wechseln('menue01','Grafik01b');
OnMouseOut="Wechseln('menu01','Grafik01a')">
<img name="menue01" src="button01a.gif" width="94" height="14" border="0">
</a>
Button 2
<a href="dateiname.htm"
OnMouseOver="Wechseln('menue02','Grafik02b');
OnMouseOut="Wechseln('menue02','Grafik02a')">
<img name="menue02" src="button02a.gif" width="94" height="14" border="0">
</a>
Eweiterungen
Sie können diese Menüleiste ganz einfach erweitern, indem sie diese Logik weiterführen.
1) im Head für jeden Button 2 neue Images bekannt machen , dabei die Nummerierungen fortführen.
2) im Body für jeden Menübutton den Code-Block kopieren und die 6 Nummerierungen ändern.
| 
HOME
Download-Beispiel
DOWNLOAD 
ZURÜCK