 09-A Hintergrund-Farbwechsel (transparente Hintergrundgrafik)
Menü mit Hintergrundgrafik in einer Tabellenzeile. Die Textlinks sind CSS-formatiert, die Hintergrundfarben der Tabellenzellen werden mittels JavaScript-Event-Anweisungen geändert.
|
|
Hintergrund-Farbwechsel durch JavaScript-Event-Anweisung
Ein Griff in die Trickkiste und ein Beispiel mit Tücken: Die Formatierungsanweisungen für die Hintergrundgrafik können nicht über CSS-Anweisungen eingetragen werden!
Erweiterung des Basis-Beispiels 09. Grundsätzlich bleibt alles beim alten: Die Hintergrundfarbe wechselt bei MouseOver / MouseOut um den Hover-Effekt zu erzielen.
OnMouseOver="this.bgColor='#FFDF00';" OnMouseOut="this.bgColor='#C0C0C0';"
Variante mit Hintergrundgrafik
So und jetzt greifen wir noch mal in die Trickkiste: Verwendet wird eine dezent gestreifte Hintergrundgrafik 'stripes03.gif', die transparente Bereiche hat. Das bedeutet hier, die 1 Pixel-Bereiche zwischen den grauen Linien sind durchsichtig.
Die Hintergrundgrafik wird nun nicht im <table>-Tag sondern im <td>-Tag notiert, damit der Effekt sichtbar wird.
Die Formatierungsanweisung für die Hintergrundgrafik der Tabellenzellen kann nicht über CSS-Anweisungen erfolgen, da der MouseOver-Effekt dann ebenfalls nicht greift (siehe Demolink 04) ? ? ?
Die Tabellenzellen haben eine transparente Hintergrundgrafik. Bei MouseOver / MouseOut wird die Hintergrundfarbe gewechselt, die durch die transparenten Bereiche der Hintergrundgrafik 'durchleuchtet'.
<td background="stripes03.gif"
OnMouseOver="this.bgColor='#FFFF00';"
OnMouseOut="this.bgColor='#EFEFEF';"
Die Textlinks haben die Klasse 'nav3'
<a class="nav3" href=" ...
 CSS-Anweisungen für die Textlinks ausblenden / einblenden
CSS-Anweisungen für die Textlinks
<style type="text/css">
<!--
a.nav3:link
{font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
text-decoration:none;
color:#6F6F6F;
text-transform:none;
font-weight:bold;
}
a.nav3:visited {
color:#6F6F6F;
}
a.nav3:hover {
color:#000000;
}
-->
</style>
Grafiken
Ob sie dieses Menü nun ohne MouseOver-Farbwechsel bzw. mit / ohne Pfeilgrafik einsetzen möchten bleibt ihnen überlassen.
verwendete Grafiken:
Pfeil: (14x11) 
Trenner: (2x19) 
Email: (24x15) 
Home: (24x15) 
|
Home • CSS • Menüs • Hintergrundfarbe nit Event
Quellcode
