 09 - Hintergrund-Farbwechsel (waagerechte Leiste)
Eine Menüleiste in einer Tabellenzeile (hier mit 6 Tabellenzellen). Die Textlinks sind CSS-formatiert, die Hintergrundfarben der Tabellenzellen werden mittels JavaScript-Event-Anweisungen geändert.
|
|
Hintergrund-Farbwechsel durch JavaScript-Event-Anweisung
Die Hintergrundfarbe der Tabellenzelle wechselt bei Mouseover durch die JavaScript-Event-Anweisung für
1) OnMouseOver (Mauszeiger wird über die Tabellenzelle bewegt)
2) OnMouseOut (Mauszeiger wird aus dem Bereich der Tabellenzelle bewegt)
OnMouseOver="this.bgColor='#DEDEDE';" OnMouseOut="this.bgColor='#C0C0C0';"
CSS-Anweisungen für die Textlinks - Menü 09-1A
<style type="text/css">
<!--
.textlink01 {
color:#FFFFFF;
text-decoration:none;
font-family:verdana,arial,helvetica;
font-size:8pt;
text-transform: none;
}
.textlink01:visited {
color:#FFFFFF;
}
.textlink01:hover {
color:#FFFFFF;
}
-->
</style>
Den gesamten Quellcode inclusive der Tabelle entnehmen Sie bitte der Textdatei 'Code 1A', für den Sie oben im Kopf dieser Seite einen Link finden.
Beispiel 09-1B
Hier eine Variante, bei der ich zusätzlich transparente Grafiken einsetze. Dieses graue Menü (09-1B) können Sie übrigens in eine Webseite intergriert als komplette Homepagevorlage herunterladen.
Manche mögen's grau. Eine unauffällige Navigation, gut geeignet für ein Informationsfenster mit unterschiedlichen Themen. Schlicht sauber und dezent wirkt eine graue Leiste, unauffällig an den oberen Rand 'geklebt'. Passt zu beinahe allen Farbtönen (siehe Beispiel).
Menü 09-1B
Die Textlinks (Größe, Farbe und Schrifttype) wurden mit CSS formatiert (Auszug)
<style type="text/css">
<!--
a.nav2:link {
font-family: Verdana,Arial,Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
color: #333333;
}
-->
</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) 
Variante mit alternativer MouseOver-Farbe
Die MouseOver-Farbe #FFDF00
Die Hintergrundfarbe wechselt bei MouseOver
onmouseover="this.bgColor='#FFDF00';" onmouseout="this.bgColor='#C0C0C0';"
Download
In der Sektion 'DOWNLOADS' können Sie das komplette Beispiel herunterladen!
  HP-Vorlage H01
|
Home • CSS • Menüs • Hintergrundfarbe nit Event
Code 1A
