I came across a really cool way to create image rollovers using nothing but CSS! This method requires no JavaScript code, does not require any preloading of images and your rollovers will load super quick. Compatibility is excellent as the rollovers will work in IE 5.x, Mozilla, Netscape, Opera and Safari.
Before I begin explaining this technique, take a look at the example and then do a View Source on the page.
The technique is really quite simple. It involves:
- Creating a <div> element to contain the rollovers
- Creating a series of anchor elements
- Create a rule for the anchor tag that sets the background image of the anchor. The element must also be set to display as a block element for the background image to work.
- Create a rule for the anchor tag that sets the margin (for space around the anchor) and padding (for positioning the text within the anchor)
- Create a :hover and :active pseduo class rule for repositioning the background image of the anchor.
This brings us to the most important part of this technique – creating the background image. In the last bullet – I mentioned that we would be repositioning the background image. This is the really clever thing about this technique. When we create our image, we are actually placing three copies of the button in the same image. One stacked upon the other (see the image below).
Each button must be evenly spaced (in my example they are 38 pixels apart. Remember this number – we will use it in our CSS rule. Also note that there is no text on my buttons – the text will actually be placed over the image by the content of the anchor tag. This means that each button consists of the exact same image – meaning that the buttons will display really quickly. And because there is only one image for each state of our button, the download time will be fast!
So let’s take a look at the code…
<html>
<head>
<title>CSS Rollovers - Preloading Not Required</title>
<style type="text/css">
.nav a {
display:block;
width:120px;
height:27px;
margin-top: 3px;
padding-top: 6px;
padding-left: 25px;
font-weight: bold;
font-size: 12px;
font-family: arial;
color:#ffffff;
background: url("navCSS.gif") top left no-repeat;
text-decoration: none;
}
.nav a:hover {
background-position: 0 -38px;
color:#ffcc00;
}
.nav a:active {
background-position: 0 -76px;
color:#ffffff;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Support</a>
<a href="#">Download</a>
</div>
</body>
</html>
In the rule .nav a…
- display is set to block
- height and width are set to the size of each individual button
- margin-top sets amout of whitespace between each button
- padding-top sets the amound of whitespace between the top of the button and the text displayed within it
- padding-left sets the amound of whitespace between the left edge of the button and the text displayed within it
- background set the background image to the specified url and sets it to place in the top left corner and the image will not repeat
- text-decoration is set to none so that there is no underline on the text that will be displayed within the button
In the rule .nav a:hover…
- background-position is set to 0 (left) and -38px (top). This is where the work is being done. On hover (or mouseover) the position will be set to negative 38, which is the start of the second button on our background image.
- color is set to yellow which changes the text color
In the rule .nav a:active…
- background-position is set to 0 (left) and -76px (top). On hover (or mouseover) the position will be set to negative 76, which is the start of the third button on our background image.
- color is set to white which changes the text color
Well that’s it! A pretty simple technique that will speed up your rollover images. I like the fact that the text caption on the buttons come from the anchor tag – meaning that you don’t have to waste a whole bunch of time creating a whole bunch of unique buttons – so you could say that not only does it speed up your site display – but also your site design.
{ 3 comments… read them below or add one }
Your example link is borken.
This URL is broken. Is it the example.
Your code is escaping the html bracket symbols . Otherwise, good article.