webdesign freiburg - dizign.de

MouseOver mit Grafiken

Rollover Effekte sind auch ohne JavaScript möglich.
Neben der Gestaltung der Links als Blöcke. kann man auch Hintergrundgrafiken wechseln lassen.

Das Aussehen der Links wird in einem style abgelegt. Die spezielle Klasse heißt in diesem Fall mainlevel.
Damit bleiben die "normalen" mit a gelinkten Links unberührt.
Die Links werden um die Klasse mainlevel wie folgt erweitert: <a href="#" class="mainlevel">Link</a>.

CSS-Code

 
<style type="text/css">
<!--
 
a.mainlevel:link,a.mainlevel:visited,a.mainlevel:active {
display:block;
font-size:11px;
font-weight:bold;
color:#00F;
padding-left:15px;
height:20px;
width:140px;
text-decoration:none;
vertical-align:middle;
background:url(../images/quadrat.gif) no-repeat;
}
 
a.mainlevel:hover {
text-decoration:none;
color:#FC3;
background:url(../images/pfeil.gif) no-repeat;
}
 
 
-->
</style>
 

Der entscheidende Punkt ist die Zeile:
background:url(../images/quadrat.gif) no-repeat;
diese implementiert eine Grafik als Hintergrund des Links. Die Breite und Höhe des Links wird entsprechend der Grafik angepasst:

height:20px;
width:140px;

Um einen Hover-Effekt zu erzielen wird bei der Klasse hover einfach ein anderes Bild verwandt.

So sieht es dann aus:
Forum Links SSI Tutorial