To achieve an image mouseover effect with CSS, you only need a few lines of code an a single image. No javascript and no dependency on clunky onload() or onmouseover() events.  Another great part about this method is that you will be utilizing a single image, rather than two images (inactive state and active state).

Laying the HTML Groundwork

The beauty of CSS is that there are several ways to do this, all effective.  The simplest and most direct method for laying your groundwork is to create a A link box, however, you can also create a box area using an DIV tag, SPAN tag, LI tag, etc. the code will just be slightly different.  Also, there are still several browser versions that only support the CSS :hover command on a link, and not on block elements of the page.  So, if possible, just use the A tag.

I am going to make a few assumptions, one being that the image you are working with is 200px wide and 100px high (the displayable area).  This means, you need to create an image that is actually 200px wide by 200px high because you will put the inactive state image on top, and active state image on bottom.  Only the top half of the image is displayed, and then on mouse over or ‘hover’ the image shifts to display the bottom only.

Here is the HTML code to start with:

<a href="/yourlinkhere" class="cssmouseover"></a>

That’s it! If you want to use several mouseovers in your document, change the above code to this:

<a href="/yourlinkhere" class="cssmouseover"
style="background-image: url('/pathto/image.jpg');"></a>

Replace pathto/image.jpg with the path to your mouseover image for that specific occurence, relative to the document URL.

CSS Code…The meat and potatoes

Now that the basic HTML code is there, we tell the browser what to do with CSS.

For the first example, the css code needed to create the mouseover effect is as follows:

a.cssmouseover {
display:block;
width:200px;
height:100px;
background-image:url(pathto/image.jpg);
background-position:0px 0px;
}
a.cssmouseover:hover {
background-position:0px -100px;
}

If you are utilizing the second example, with several instances of the mouseover effect in one page, simply remove the ‘background-image:url’ tag in the a.cssmouseover reference since you will be controlling that css property directly in the document.

As you can see, the code above is simply using the background-position property of css to shift the image upwards 100px when the area is hovered over.  In this case, the pathto/image.jpg needs to be relative to the CSS file where this code is placed, or if you placed it directly into the document of course it will be relative to the document.

Using Other Tags Besides A in your CSS Mouseover

You can certainly use other tags besides A, as almost any HTML element can be displayed as a block with a background image.  The trick is that many browsers do not support HOVER effects on any tag except the A link tag.  So, if you want to be compliant simply use the A tag for all your hovering needs.

There are also methods of putting all the above CSS code directly into the HTML using the ’style’ attribute.  I typically avoid this as it is messier, but if you are using several different sized images and different mouseover effects you might have to do this anyway.  Every time you call the .cssmouseover effect in the example above the browser will assume the image area displayed is 200px by 100px, which may or may not be true for all of your images.

Simply add or change the width and height properties in the CSS file or directly on the page via style=”" and you are good to go.

It loads fast as well, as you are only loading a single image, and the mouseover effect is really just an illusion as the image is sliding out of your view.