Hjälp med cssmeny

Tråden skapades och har fått 4 svar. Det senaste inlägget skrevs .
1

Jag är ganska ny användare av css och tänkte kolla ifall det fanns något sätt att göra en hover på en bildlänk så att den får cirka 50% opacitet (opacitet: genomskinligt) när man håller över bildlänken med muspekaren?

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).

Ursprungligen av Adrian B:

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).

Har du lust att skriva en kodsnutt för att visa hur ? Och kanske förklara det där lite mer vad du menar med att sätta ihop 2 bilder och hur jag ska gå till väga?

Ursprungligen av muckbuck:

Har du lust att skriva en kodsnutt för att visa hur ? Och kanske förklara det där lite mer vad du menar med att sätta ihop 2 bilder och hur jag ska gå till väga?

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).

Ursprungligen av Adrian B:

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).

Stort tack lärorikt!
ska försöka mig på det imorgon

1
Bevaka tråden