 Hintergrundbild tauschen bei MouseOver
Das man die Hintergrundfarbe mit CSS (bei Mouseover z.B.) tauschen kann habe ich in einem anderen Beispiel erklärt. Ein weiteres Beispiel zeigte, wie man für einen Textlink eine Hintergrundgrafik festlegt. Hier demonstriere ich den Tausch einer Hintergrundgrafik bei MouseOver.
1) Hintergrundbild mit CSS-Anweisungen tauschen
Nur zur Demo des Prinzips tausche ich hier die Hintergrundgrafik eines Textlinks der die Unterklasse 'graf' hat:
<a class="graf" href="#"> Textlink mit Hintergrund</a>
Die CSS-Anweisungen dazu wurden im Head der HTML-Datei notiert:
a.graf:link, a.over:visited
{
color:#000000;
font-size:11px;
width:90px;
background-image:url(images/bg12.gif);
}
a.graf:hover, a.graf:focus, a.graf:active
{
color:#000000;
font-size:11px;
width:90px;
background-image:url(images/bg13.gif);
}
2) Menü mit dieser Technik erstellen
Mit dieser Technik lassen sich nun ganz brauchbare Menüs 'basteln', die später leicht angepasst werden können indem man die beiden verwendeten Grafiken gegen andere austauscht.
Die graue Titelzeile ist hier der Einfachheit halber eine simple Tabelle.
Die CSS-Formatierungen für die Links habe ich zugewiesen, indem ich alle Links innerhalb eines <DIV>-Containers plaziere, für den eine CSS-Klasse eingetragen wurde. Welche Formatierungen für diese CSS-Klasse gelten sollen, wurde im HEAD-Bereich der HTML-Datei festgelegt (Den Code finden sie weiter unten oder in der Textdatei).
HTML-Code für das Menü:
<table bgcolor="#FFFFFF" width="170"
cellspacing="0" cellpadding="0" border="0">
<tr bgcolor="#999999">
<td align="center"><span style="color:#FFFFFF">Autohäuser</span></td>
</tr></table>
<div class="menbsp01">
<a href="#"> Autohaus Beule</a>
<a href="#"> Autohaus Busch</a>
<a href="#"> Autohaus Cremer</a>
<a href="#"> Autohaus Distel</a>
<a href="#"> Autohaus Hilgers</a>
<a href="#"> Autohaus Klemm</a>
<a href="#"> Autohaus Leibig</a>
<a href="#"> Autohaus Meister</a>
<a href="#"> Autohaus North</a>
</div>
CSS-Anweisungen (werden im Head der HTML-Datei notiert):
<style type="text/css">
<!--
.menbsp01 a {
display: block;
color:#000000;
text-decoration:none;
font-family:Verdana,Arial,Helvetica;
font-size:11px;
text-transform: none;
background: #FFFFFF url(bg14.gif) top left;
padding:1px 0px 2px 0px;
margin: 1px 0px 0px 0px;
width:170;
}
.menbsp01 a:visited {
display: block;
color:#000000;
background: #FFFFFF url(bg14.gif) top left;
padding:1px 0px 2px 0px;
margin: 1px 0px 0px 0px;
width:170;
}
.menbsp01 a:hover {
display: block;
color:#000000;
background: #FFFFFF url(bg10.gif) top left;
padding:1px 0px 2px 0px;
margin: 1px 0px 0px 0px;
width:170;
}
-->
</style>
Der Schlüssel für die 'Tauschgrafik' bei MouseOver liegt in der Notierung der Grafik für 'hover' (bg10.gif), die sich von der Standard-Grafik (bg14.gif) unterscheidet.
Infos
Die Festlegung von margin = 1 Pixel für den oberen Abstand, schafft einen 1 Pixel Abstand zwischen den Buttons.
margin: 1px 0px 0px 0px; /* (oben, rechts, unten, links)*/
Die Notierung für die Innenabstände (padding oben und unten) plaziert den Textxtlink in etwa an die Position, die ich mir für die Linktexte wünsche.
padding:1px 0px 2px 0px; /* (oben, rechts, unten, links)*/
Die Grafiken zum Download
 bg10.gif
 bg11.gif
 bg12.gif
 bg13.gif
 bg14.gif
Weitere kostenlose Grafiken
Eine Auswahl unterschiedlicher Grafiken, auch unbeschriftere Button-Grafiken für Menüs, finden sie in meiner
 MINI-IMAGE-BOX - 7000 kostenlose Mini-Grafiken für den Webmaster
|
Home
Quellcode Beispiel 
ZURÜCK