Hover ersätter onMouseOver?

Hej,

jag håller på med ett litet projekt och vill göra en meny som är uppbyggd av bilder och har en effekt att den byter bild när man drar musen över, samt när man klickar blir det ytterligare en bild.

Man kan göra detta på många sätt med hjälp av javascript, men i detta fall skulle jag vilja att det var gjort enbart med css om det nu är något att rekommendera.

Man kan ju, men background-image ange olika bilder, men jag får det inte att funka som jag vill. I de exempel som jag har hittar är det alltid en bakgrundsbild som ändras och en vanlig html-text på knapparna (vilket jag inte vill ha utan en vanlig bild..)

Mina tankar funderar över något liknande:

.nav {
	position: absolute;
	top: 70px;
	left: 40px;
	width: 558px;
	height: 18px;
}
.but {
	width: 94px;
	height: 18px;
}
.button1 {
	background-image: url(images/img1_out.gif);
}
.button1 a:hover {
	background-image: url(images/img1_over.gif);
}
... etc ...

Nu är ju koden långt i från klar, och fungerar säkerligen inte heller, men det kanske visar någolunda hur jag har tänkt mig i alla fall..

Sedan har jag sett att en hel del menyer använder listor (li), är det någonting att föredra? Känns som att det bara blir mer kod.

Hoppas ni förstår vad jag menar och kan ge mig ett bra exempel.

Tack på förhand

Bästa sättet är att bara använda sig av en bild som man sedan flyttar med background-position. Detta för att undvika att man ser att bilden laddas in på hover.

Har följande exempel som visar detta. Om man nu enbart vill använda sig av bilder och ingen text kan man lägga till

ul li a
{
	text-indent:-999px;
}

så att inte texten syns när man ser sidan med CSS. Utan CSS ser man inte bilderna utan bara listan.

Aha inte klurigare än så ;)

Tack så mycket. Kollade även in:
http://www.alistapart.com/d/sprites/ala-buttons1.html