Here is the code to make an image rollover [or mouse over, or swapping image, or image swap, or whatever...] in css. I have used it in arrivanoicorti.it, with another script for loading a random css on you page. Now i am scripting to create in css a random image rollover. This is not so hard, but equally not so easy, either to find it over the internet.

a:link, a:visited {
display: block;
width: 127px;
height:25px;
line-height: 25px;
color: #000;
text-decoration: none;
background: #fc0 url(imagename.png) no-repeat left top;
text-indent: 25px;
}

a:hover {
/* background: #c00; */
background-position: right top;
color: #fff;
}

You have to create an image double in size, like a sprite in older videogames, containg the two parts: on and off state. With mouse over, background-position: right top makes it shift, reavealing the hidden part. it's clear?

The background in the off state (:link) positions the background image to the left and top showing the off state portion of the image. On rollover (:hover) the background position is shifted to the right displaying the "on" portion of the background image. The width value effectively clips the image to show only the portion of the image that you want displayed. You can also use this technique to highlight visited links.

Eliminating Browser Differences: you may want to zero out margin and padding values to eliminate rendering differences between browsers thus:

a {
margin:0;
padding:0;
}

This however will zero out all the margins and padding for all links. Better still be specific in your selectors to avoid coding extra CSS.

#nav ul li a {
margin:0;
padding:0;
....
}