Web design tutorials
How to create the perfect pure CSS and XHTML image rollover
Well, maybe. I'm going to go through the method that I used for creating the navigation rollovers on my night theme for this website. This is the result:
What not to do
Rollovers seem like simple things, and there are several ways of doing them, but to make them accessible, browser-compliant and fluid you have to do a little bit of work. There are a couple of methods that I want to ward you away from:
- Using CSS to switch between two seperate background images: using this method creates a delay when you hover over for the first time, as the hover image isn't loaded with the page. We want something a bit more fluid...
- Placing images within the HTML: you could have images in your code which hide and appear depending on whether you are hovering over, but I would recommend against this for the sake of non-CSS browsers. In this case the two images would make no sense, as both would appear. It's best to come up with a CSS solution.
How it's done
This is the HTML code I used for the above:
HTML
<div id="rollover_test">
<a href="#">
<span class="image"></span>
<span class="text">tutorials</span>
</a>
</div>
Notice how there is actually some text in there? The word "tutorials" is inside a span element which is hidden using CSS. This is so that anyone using a non-CSS browser will still be able to use the link, as the images won't show but the word "tutorials" appears and it becomes the link. The span element with class "image" will be the element showing the rollover image. I've used spans and not divs so that this will validate as XHTML (as you can't have a div inside a link element), and setting the display style to block in the CSS.
Here's the CSS:
CSS
#rollover_test {
height: 110px;
width: 129px;
border: 1px solid white;
margin: 0px auto 10px auto;
}
#rollover_test .text {
display: none;
}
#rollover_test a {
display: block;
position: relative;
height: 100%;
width: 100%;
cursor: hand;
cursor: pointer;
text-align: center;
}
#rollover_test .image {
display: block;
position: relative;
width: 100%;
height: 100%;
background: url(../tutorials_but.jpg) left top no-repeat;
}
#rollover_test a:hover .image {
background-position: left -110px;
}
Firstly, you set the dimensions of the containing div, which is dependant on the size of the image. Then set the "text" span to display: none;, which will hide the text to CSS users. Then make the link element expand to fit the container div, and add the cursor definitions for luck (for some reason IE6 doesn't display the little hand by default).
The clever part
This is the crux of this rollover tutorial. Possibly the most standards-compliant and effective method of creating an image rollover is to use a "double image", where the default image and the rollover image are stitched together to create one "double image". For instance, the image for my rollover looks like this:
This method means that the whole image is loaded when the page is initially loaded. Using this double image method, the property that you change is the background image position.
The CSS background-position tag reads horizontal position and then vertical position as a W3C standard. So background-position: 10px 30px; will display the background 10px from the left and 30px from the top. Use the height of the single image to determine the offset of the double image. For example, my single image is 110px in height, so the offset is -110px.
Ta-da
And there you have it. In the case of this tutorial I've put it within a div container, but you can apply the same technique to lists for the purpose of navigation menus. This validates as both XHTML and CSS 2.1.
Comments
There are no comments on this tutorial. Why not be the first?