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

float or not to float

Mit der Eigenschaft float lassen sich Elemente gesteuert umfliessen. float gibt es in den Ausführungen left, right und none. Wobei none das Standardverhalten ist.

 
<div style="width:50px;float:left;border:1px solid gold;">ich stehe links und werde rechts umflossen</div>Blindtext braucht es um es deutlicher zu machen. Blindtext braucht es um es deutlicher zu machen. Blindtext braucht es um es deutlicher zu machen. Blindtext braucht es um es deutlicher zu machen.
<div style="clear:left"><b>Clearing</b></div>
 
<div style="width:50px;float:right;border:1px solid gold;">ich stehe rechts und werde links umflossen</div> Blindtext braucht es um es deutlicher zu machen. Blindtext braucht es um es deutlicher zu machen. Blindtext braucht es um es deutlicher zu machen.