Mouseover - mit verschiedenen Bildern

[bugz]

Hallo,
ich hätte da ne Frage bezüglich eines Mouseover Menüs.
Ich will nämlich wie auf dem Bild jedem Menupunkt ein extra Bild verpassen bekomm das, aber nicht auf die Reihe iwie.

Hier mein bisheriger Code:

#menu a , .menu a:visited , .menu a:active {display:block;
background-image:url(images/3.png)!important;background-repeat:no-repeat;
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);color:#fff;
text-decoration:none ;
text-align:center;
width:150px;
border:solid 1px transparent;
font-size: 12px;line-height: 25px;
font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;
font-style:normal;
margin:1px;
}


#menu a:hover{background-image:url(images/4.png)!important;
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
color:#fff;
text-decoration:none ;
}

Ich hoff jemand kann mir helfen und ich bedanke mich schonmal im voraus.

gruß

 

[Tar]

Wenn die Hintergrundbilder verschieden sein sollen, benutzt du am besten IDs.

 

[bugz]

mh danke, aber ich hab seit 6 Jahren nichts mehr mit HTML gemacht. Helf mir bitte ma auf die sprünge ^ wie würde das dann aussehen ?

 

[Tar]

HTML (Beispiel)

<ul>
<li><a href="link1.html" id="link1">Link 1</a></li>
<li><a href="link2.html" id="link2">Link2</a>/li>
</ul>

CSS (Beispiel)

*,* {
padding:0px;
margin:0px
}

ul li a {
  display:block;
  height:30px;
  width:150px;
}

ul li a#link1:link,
ul li a#link1:active,
ul li a#link1:visited {
  background:url(images/bg1.gif) top left no-repeat;
}

ul li a#link1:hover,
ul li a#link:focus {
  background:url(images/bg1_hover.gif);
}

ul li a#link2:link,
ul li a#link2:active,
ul li a#link2:visited {
  background:url(images/bg2.gif) top left no-repeat;
}

ul li a#link1:hover,
ul li a#link:focus {
  background:url(images/bg2_hover.gif);
}

NUR EIN DENKANSTOSS & NICHT GETESTET!

Gruß,

Tar

 

[assmaje]

Sorry, leider kann ich dir nur allgemein helfen, das mit opacity blick ich selber nicht. :( Also erstmal machst du ein Bild, auf dem beide Zustände direkt nebeneinander drauf sind, also normal und wenn man mit der Maus drüberfährt. Und dann realisierst du das ganze mit background-position:

Hier sind jeweils deine Teilbilder (deine Buttons) 80px groß.

HTML:

<a id="button1" href="link.html"></a>

CSS:

#button1 {
     background:url("[COLOR="Red"]zwei bilder in einem.png[/COLOR]") 0 0 no-repeat;
     width:80px;
     height:80px;
     display:block;
     padding:0px;
     border-width:0px;
     font-size:0px;
     text-decoration:none;
     text-indent:-100px;
}

#button1:hover { 
     background-position:-80px 0; [COLOR="Red"]das bild wird 80px nach rechts verschoben[/COLOR]
}

Nach dem gleichen Prinzip kannst du das dann auch mit :visited, :active usw. machen und durch das Verschieben der background-position gibt es auch keinen nervigen Nachlade-Effekt. ;)

 

[bugz]

ok danke probier ich ma aus.... hört sich gut an...ich glaub daraus kann ich was machen !