keine_Ahnung: Bilderwechsel

Beitrag lesen

Hi Sky,

ich weiß ja nicht was du damit vor hast aber ich hab meine Bildwechselfunktion für meine Navigation mit CSS gemacht:

CSS:
.Links1 {
 font-size:12px;
 font-weight:bold;
 margin-left:+33px;
 }
.Links2 {
 font-size:12px;
 font-weight:bold;
 margin-left:+54px;
 }
#box {
 line-height:29px;
 margin-bottom:15px;
 }
.menu{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_0.jpg);
 background-repeat:no-repeat;
 }
.menu:hover{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_1.jpg);
 background-repeat:no-repeat;
 }
.menu_o{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_oben_0.jpg);
 background-repeat:no-repeat;
 }
.menu_o:hover{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_oben_1.jpg);
 background-repeat:no-repeat;
 }
.menu_u{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_unten_0.jpg);
 background-repeat:no-repeat;
 }
.menu_u:hover{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Punkt_unten_1.jpg);
 background-repeat:no-repeat;
 }
.umenu{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Unterpunkt_0.jpg);
 background-repeat:no-repeat;
 }
.umenu:hover{
 display:block;width:180px;height:29px;
 background-image:url(../navigation/Unterpunkt_1.jpg);
 background-repeat:no-repeat;
 }
a:link {
 color:#000000;
 font-size:12px;
 font-weight:bold;
 text-decoration:none;
 }
 a:visited {
  color:#000000;
 font-size:12px;
 font-weight:bold;
 text-decoration:none;
 }
 a:hover {
  color:#000000;
 font-size:12px;
 font-weight:bold;
 text-decoration:none;
 }

Und im html dann:

<div id="box"><a target="_top" href="../../index.htm" class="menu_o"><span class="Link1">Startseite</span></a>
<a target="_top" href="../seite1.htm" id="menu"><span class="Links1">Link1</span></a>
<a target="_top" href="Link2.htm" class="menu"><span class="Links1">Link2</span></a>
<a href="Unter_Link2a.htm" class="umenu"><span class="Links2">Unterpunkt</span></a>
<a href="Unter_Link2b.htm" class="umenu"><span class="Links2">Unterpunbkt2</span></a>
</div>

Das werden dann so Punkte die Untereinander sind. Wie du siehst gibt es vier verschiedene Punkte in jeweils zwei verschiedenen zuständen. Kann natürlich beliebig ausgebaut werden.
Die Span brauchst du um den Text richtig vor dem Hintergrund zu positionieren.

Hoffe es hilft dir.