Hjälp med cssmeny

Du kan ju alltid göra två bilder som du byter ut med CSS-kod vid hover, en full opacitet och en med 50 procent. Vill du vara lite avancerad kan du sätta ihop bilderna till en bild och bara byta position på bilden (då är bilden redan laddad och det går lite snabbare).

Du kan se ett live-exempel jag gjort här: travnet.se xpress

Det är flikarna för loppen jag syftar på. Om du tittar på en av bilderna enskilt ser den ut såhär:

Det är tre bilder där, men det är bara två som används i detta exempel, den översta och nedersta (mittenbilden används vid aktiv flik). Bilden ligger som en bakgrundsbild med CSS. Genom att justera position vid hover flyttar jag bilden i höjdled.

Så koden för själva bilden ser ut såhär:

#tab02 a,
#tab02 a:visited {
background: url(/images/tabs/tabs5-t02.gif) bottom no-repeat;
}

#tab02 a:hover {
background: url(/images/tabs/tabs5-t02.gif) top no-repeat;
}

Observera att jag byter ut bottom mot top vid hover.

Detta exempel förutsätter att elementet (i detta fall en länk) har en fast höjd exakt lika stor som bilden man vill visa, i detta fall såhär:

#tabs a:visited, 
#tabs a {
height: 38px;
width: 43px;
float: left;
margin: 0px;
padding: 0px;
line-height: 25px;
margin-left: 1px;
border: 0px solid red;
}

Det är lite mer kod där, float och margin och annat, det är framförallt höjd och bredd som är intressant i detta fall.

Det går nog att lösa på många olika sätt, men jag tycket detta var smidigt i det här fallet. Fördelen med tekniken är att jag bara behöver ladda en bild för att få in alla varianter (varje extra laddning påverkar hur snabbt sidan ritas upp).