Rollover without image change

I have a small thumbnail image that I wish to change when the mouse rolls over it. I was wondering if there was a way to do this without swapping images on the rollover. For example, through CSS could I have the opacity change on rollover? If you have any other ideas about ho开发者_开发技巧w to manipulate the image with CSS on rollover for making a change I am open.

Thanx!

You could put both images in one bigger image, use it as a background image and change only the position on roll-over.

With CSS3, there is an opacity option. This way you wouldn't be forced to reload an image when they hover above something.

#div {
  background-image: url('blah.png'); 
}

#div:hover {
  opacity: 0.5;
}

I'm not exactly sure if that's the right way to use it so you should use google for more examples. However, you should be careful because not all browsers might be supporting CSS3 yet.

Try using the :hover style on a tag. It may not be supported very well in early IE editions. But you can do something like:

img {
    border: 1px solid black;
}
img:hover {
    border: 1px solid white;
}