Simple mouse-over CSS code...can't figure it out

[Logical]

So all I want to do is a simple image swap when the user hovers over a button, but I just can't get it to work.

I have images (buttons) that are separate div id's but all in the .rollover class. Each button has text on it; each text has its own div id and is not part of the same element as the image. My setup is thus:

<div class="rollover"><a href="#"><img src="button.jpg" id="img1"></a></div>
<div class="rollover"><a href="#"><img src="button.jpg" id="img2"></a></div>

and so on.

I just want to swap button.jpg for button2.jpg when hovering. I've tried to follow CSS rollover buttons with the exception that my text is not included as a <span> in the div, I've changed the image dimensions to match mine, and obviously changed the name of the image file in background-image. My code is otherwise exactly the same.

Halp?

 

[Scheme]

Is it a button for a navigation menu? Or just a button?

 

[Logical]

Just a button, no navigation menu.

 

[Houdas]

Maybe that will help - [ws] Fast Rollovers Without Preload | Rychlé rollovery bez načítání

 

[BRB_fapping]

a { background:url(button.jpg); display:block; width:200px; height:100px; }
a:hover { background:url(button2.jpg) }
<a href="#">herp derp</a>

 

[kdr4t]

You don't actually want it to show a different image on the rollever, as that creates a flicker effect if a browser hasn't cached the image already.

Instead you use a 'sprite' where half of the image is image1 and the other half is image2 (the image you want seen when the mouse is over). Then you simply show one half when the mouse isn't over, and then the other half when the mouse is over the button.

CSS Image Rollovers - Webvamp

 

[medway]

You don't actually want it to show a different image on the rollever, as that creates a flicker effect if a browser hasn't cached the image already.

Instead you use a 'sprite' where half of the image is image1 and the other half is image2 (the image you want seen when the mouse is over). Then you simply show one half when the mouse isn't over, and then the other half when the mouse is over the button.

CSS Image Rollovers - Webvamp

this.

sprites are good anways as they cut down on http requests.