 keine Langeweile - wenig Aufwand
Eine grafische Menüleiste muss nicht langweilig sein. Abhängig von Seiteninhalt und Farbgebung kann man seinen Phantasie freien Lauf lassen. Wenn man dann noch mit einer MouseOver-Funktion arbeitet, bringt man 'Action' in die Seite.
|
|
MouseOver-Grafiken - eine für Alle
Ich demonstriere hier, wie man für MouseOver-Funktionen mit nur einer einzigen alternativen Grafik auskommen kann. Mein Beispiel ist für 100 × 75 Pixel große Grafiken ausgelegt, die immer noch innerhalb einer Tabelle stehen. Demnächst veröffentliche ich ein Anwendungsbeispiel ohne Tabellentechnik (<div>).
a) Variante 1 - MouseOver-Grafiken - eine für Viele
Leider ist der Aufwand recht groß, für jede verwendete Grafik ein eigenes MouseOver-Bildchen herzustellen. Das kann man sich erleichtern, setzt man jedesmal die gleiche Grafik ein.
Beispiel 01 - identische MouseOver-Grafiken
Beispiel 02 - identische MouseOver-Grafiken
(Nicht nur) anwendbar auf Bildserien mit gleichem Motiv.
b) Variante 2 - MouseOver-Grafiken - eine für Alle
Der Aufwand ist schon geringer aber immer noch recht groß. Besonders dann, wenn man solche Grafiken als anklickbaren Blickfang (Eyecatcher) auf jeder Seite verwenden möchte und die Grafiken und Fotos häufig wechseln. Man wäre ja gezwungen, für jedes Piktogrammserie eine entsprechende (Negativ-)Grafik herzustellen. Diesen Aufwand kann man sich ersparen, setzt man z.B. eine Rastergrafik ein, die bei MouseOver über die Grafik gelegt wird:
einsetzbare, transparente MouseOver-Grafiken
Ich habe diese 100 × 75 Pixel großen Grafiken für Sie hergestellt. (rechtsklicken zum Download)
 |
 |
 |
 |
 |
raster
schwarz |
raster
weiß |
diagonal
grau |
diagonal
schwarz |
diagonal
weiß |
 |
|
|
|
|
MouseOver für eine Demo
Funktion
Die Darstellung der 100 × 75 Pixel großen Grafiken erfolgt (in diesem Anwendungsbeispiel noch) innerhalb einer Tabelle!
a) im Hintergrund einer Tabellenzelle steht die eigentliche Grafik (Foto, Symbol, ...)
b) im Vordergrund der Tabellenzelle eine transparente Grafik
In einer Tabellenzelle wird die anzuzeigende Grafik als Hintergrundbild notiert. Als Inhalt der Tabellenzelle wird eine transparente Grafik mit identischen Angaben für Höhe und Breite eingetragen. Die transparente Grafik dient als Verweisfläche für einen anklickbaren Link.
Diese transparente Grafik wird bei MouseOver / MouseOut ausgetauscht!
|
|
|
|
Es werden 2 Funktionen eingesetzt. Die erste tauscht die transparente Grafik gegen eine Rastergrafik, die zweite tauscht die Grafiken wieder zurück.
(bewegen Sie den Mauszeiger über die Grafik links)
|
Bei MouseOver wird die Funktion "Ein02()" bei MouseOut wird die Funktion "Aus02" aufgerufen. Die Überwachung dieser Ereignisse geschieht mit den Eventhandlern OnMouseOver bzw. OnMouseOut. Der Name der auszutauschenden Grafik wird dabei der Funktion als Parameter übergeben.
OnMouseOver="Ein02('Name der Grafik');"
OnMouseOut="Aus02('Name der Grafik')">
Damit man die transparenten Grafiken (für JavaScript ein Bild-Objekt) gezielt ansprechen kann, muss daher für jede auszutauschende Grafik ein Name vergeben werden.
<img name="Bild01" src="transpixel.gif" width="100" height="75" border="0" alt="">
Der Einfachheit halber (und damit ich die Übersicht behalte) nummeriere ich die Grafiken einfach durch. Die Objektnamen für die Grafiken innerhalb der Links habe ich hier mit 'Bild01', Bild02, Bild03, ... festgelegt.
 Jeder Name darf innerhalb einer HTML-Seite nur einmal vergeben werden!
1 im HEAD-Bereich
Zuerst werden die Grafiken bekannt gemacht, bekommen einen eindeutigen Namen und werden vorab geladen. Dann folgen die Funktionen zum Austausch bei MouseOver und MouseOut.
<script type="text/javascript" language="JavaScript">
<!--
// Standard-Grafik (transparent)
normal02 = new Image();
normal02.src = "transpixel.gif";
// Highlight-Grafik (diagonal weiss)
over02 = new Image();
over02.src = "grafik-diagonal03.gif";
function Ein02(GrafikName) {
// GrafikName - Name des auszutauschenden Bildes
document.images[GrafikName].src = eval('over02.src')
}
function Aus02(GrafikName) {
// GrafikName - Name des auszutauschenden Bildes
document.images[GrafikName].src = eval('normal02.src')
}
//-->
</script>
2 Grafiken als Link im BODY-Bereich
Bei MouseOver bzw. MouseOut wird die Funktion "Ein02()" bzw "Aus02" aufgerufen. Die Überwachung dieser Ereignisse geschieht mit den Eventhandlern OnMouseOver bzw. OnMouseOut. Der Name der auszutauschenden Grafik wird der Funktion als Parameter übergeben.
<table><tr>
Verweis in Tabellenzelle 1
<td background="grafik01.gif">
<a href="fenster.htm" target="_blank"
OnMouseOver="Ein02('Bild01');"
OnMouseOut="Aus02('Bild01')">
<img name="Bild01" src="transpixel.gif" width="100" height="75" border="0" alt="">
</a>
</td>
Verweis in Tabellenzelle 2
<td background="grafik02.gif">
<a href="fenster.htm" target="_blank"
OnMouseOver="Ein02('Bild02');"
OnMouseOut="Aus02('Bild02')">
<img name="Bild02" src="transpixel.gif" width="100" height="75" border="0" alt="">
</a>
</td>
So können Sie diese Leiste ganz einfach erweitern, indem Sie diese Logik weiterführen. Erweitern Sie die Tabelle um zusätzliche Tabellenzellen, wobei Sie bei den Objektnamen der Grafiken (Bild01, Bild02, Bild03, ... ) die durchgehende Nummerierung fortsetzen und die entsprechenden Ziffern eintragen.
</tr></table>
Beispiel Einsatzbereich
Beispiel Eyecatcher als Link
|
|
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
|
|
Home • Tipps • Mouseover-Grafik
Demo
Download