Tonys Wibbles

As usual, I wanted to do something I felt should be simple in HTML, and I couldn't find a good answer. In this case, I wanted to create a rollover effect on an image, without having to revert to using JavaScript. All the solutions I found used background images and block elements. These just never quite worked for me as I wanted the images to be inline. So I came up with my own solution.

My solution is based on providing both images in the HTML then selectively hiding them based on the hover status. Here is an example HTML...

<a href="#" class="Rollover">
  <img src="/Normal.gif" class="Out"  />
  <img src="/Hover.gif" class="Over"  />
  Link Text
</a>

The class "Rollover" defines the scope of the rollover effect. So in this case, hovering over the link will trigger the rollover effect. Elements inside the "Rollover" marked with the class "Out" are visible while no rollover (hover) is in effect. Elements marked with the "Over" class will only be visible while rollover is in effect. For this example the Hover.gif will replace the Normal.gif when the user hovers over the link.

In order for this to work the following CSS is required...

.Rollover .Out
{
	display:inline;
	visibility:visible;
}
.Rollover .Over
{
	display:none;
	visibility:hidden;
}
.Rollover:hover .Out
{
	display:none;
	visibility:hidden;
}
.Rollover:hover .Over
{
	display:inline;
	visibility:visible;
}

If you are placing images in links then you need to make sure you are removing borders from the image. One way to do it is to add this css:

img
{
	border: none;
}