webForumDet fria alternativet

skifta bild med css??

HTML & CSS

3 svar · 438 visningar · startad av eddy1

Medlem sedan aug. 2001969 inlägg
Frågan#1

kan man skifta bild med css, typ en meny och så tänds bilden när man för musen över.

Försökte med en container och en backgrunds bild, men fick ingen bild att synas...

Måste väll vara bättre att använda css istället för javascript (om det går).
Besökare kan ju ha javascript avstängt??

Medlem sedan apr. 200312 679 inlägg
#2

Kanske var det för att bilden inte hann ladda klart?

Jag är osäker på hur lika webläsare stöder bildladdning med css. Men det borde väl vara bra stöd...

li a {
	background: url(bg.gif);
}
li a:hover {
	background: url(bg_hover.gif);
}
<ul>
	<li><a href="#">lekstuga</a></li>
</ul>

Ingen aning om detta fungerar, men det borde det väl göra... :)

Medlem sedan aug. 20039 340 inlägg
#3
<style type="text/css">
a img#img1{
	background: url('newthread.gif');
	width: 98px;/* Du MÅSTE ange bredd och höjd här! */
	height: 18px;
	border: none;
}

a img#img1:hover{
	background: url('reply.gif');
	width: 98px;
	height: 18px;
}

</style>

<a href="#"><img id="img1" src="blank.gif"></a>

Vet ej huruvida Silfvers exempel funkar, men detta exempel funkar, dock inte i... (Gissa vilken webbläsare)

Medlem sedan jan. 2000978 inlägg
#4

Jag skulle satsa på att lägga in EN bakgrundsbild i <A>, som skiftar position vid hover. Då funkar det även i explorer och inga bilder behöver laddas in i förväg för att slippa den fördröjning som sker om en ny bild ska laddas in vid hover.
Exempel:
http://www.meadhra.com/cnet/040128/Button_Sample.html

251 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
122 ms — deklarationer (db)
0 ms — hämta statistik (cache)
126 ms — hämta tråd, inlägg och bilagor (db)
121 ms — ändringar (db)