Ändrad bild när Pekaren glider över?

Lite css bara.

#menu ul li a {
	background-image: url(/css/menu.gif);
}

#menu ul li a:hover {
	background-image: url(/css/menu_hover.gif);
}

Dvs det visas en annan bakgrundsbild när musen är över menyvalet.

Välkommen till wF btw!

Flyttas från Design & Grafik till HTML, XHTML & CSS

Med Peeers metod kommer hover-bilden att laddas först när man hovrar länken. Dvs, det kanske tar ca 1 sekund från att man hovrar länken tills bilden byts (första gången, dvs).

För att lösa det kan man ha hover-bilden i samma bild som orginalbilden och positionera om den vid hover.

Okej det låter schysst, det är detaljerna som skiljer...
men hur går man tillväga för att ompositionera bilden vid hover??

zcorpan skrev:

Med Peeers metod kommer hover-bilden att laddas först när man hovrar länken. Dvs, det kanske tar ca 1 sekund från att man hovrar länken tills bilden byts (första gången, dvs).

För att lösa det kan man ha hover-bilden i samma bild som orginalbilden och positionera om den vid hover.

eller så pre-loadar han bilderna som inte visas än.

<script language="JavaScript" type="text/JavaScript">
<!--

function MM_preloadImages() {
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

-->
</script>

och sedan
onLoad="MM_preloadImages('bild1','bild2')" i bodytaggen.

WiZzLeR: ditt förslag hör till det förflutna milleniet, jag vill inte se några DW-javascript. Usch ;)

Så här gör du:

ul {list-style-type: none;}

li a {display: block;
	height: 50px;
	line-height: 50px;
	width: 5em;
	background-image: url(menu-item-bg.png);
	background-repeat: repeat-x;
	background-position: 0 0;}

li a:hover {background-position: 0 -50px;}

<ul>
<li><a href="#">Foo</a></li>
</ul>

livet är hårt. =) sålänge sidan fungerar så!

livet är hårt. =) sålänge sidan fungerar så!

Det fungerar ju inte om användaren har inaktiverat JavaScript.

Jag försöker alltid undvika JavaScript så mycket det går... Och om jag använder JavaScript så ska informationen vara tillgänglig även utan JavaScript, och saker som beror på JavaScript ska inte finnas när det är inaktiverat (för att förhindra förvirring).

Ärligt talat kan jag inte så mycket JavaScript (eller ECMAScript, som den standardiserade versionen heter), för jag har sällan användning av det. ;)