CSS Rollovers
This is the little trick I use to make my menus rollovers. To start, let's make a simple rollover. See it in action on this page. Note that we use only one image to make the rollover. You just need to put the second image below the first one in your graphic editor and save. Let's insert the HTML codes first:
<a href="http://domain.com" class="rollover"><var>Rollover</var></a>
Do not forget to add a class and to insert the link text between <var> and </var> ! Then, the css:
var {
visibility: hidden; /* this will hide the text link */
}
a.rollover {
display: block; /* needed to set link dimensions */
width: 180px; /* width of your image */
height: 50px; /* height of your image, divided by two, we need to hide the second image */
background: url(IMAGE.JPG) no-repeat; /* image url */
text-decoration: none; /* to hide the link underline */
}
a:hover.rollover {
background: url(IMAGE.jpg) no-repeat 0px -50px; /* On mouseover, we show the second image, by adjusting background position! */
}
As you can see, I've added some values to a:hover.rollover: 0px -50px this is the background-position property. It's like the image "coordinates". The image dimension is 180px*100px but it is equally divided in two parts. When the mouse is not over, we need to show the top image, we do not set the background position because default values are 0px 0px, which is the top image "coordinates". When the mouse is over, we need to show the second image and as you can see on the grid, its "coordinates" are 0px -50px ! :) Okay, I suck at explaining. XD
Let's do something more complex, like an entire menu. This is the HTML code of our menu, I've put the links in a div:
<div id="menu">
<a href="linkone.html" class="one"><var>one</var></a>
<a href="linktwo.html" class="two"><var>two</var></a>
<a href="linkthree.html" class="three"><var>three</var></a>
<a href="linkfour.html" class="four"><var>four</var></a>
</div>
Note that the links classes are all different, this is necessary! This is the image we'll use:
Let's see it in a grid so that we can set the background-position easily for each link:
Alright, CSS time! First, let's style our menu div. Set its dimension to 400*50px:
#menu {
width: 400px;
height: 50px;
}
Now, hide the text link:
var {
visibility: hidden;
}
And for all links, hide the underline, set their height to 50px, and we'll need to add the float property, to align them correctly (because we "transformed them into blocks" to set their dimensions with display:block;):
#menu a {
text-decoration: none;
display: block;
float: left;
height: 50px;
}
Now, let's add styles for each link using classes:
a.one {
width: 100px;
background: url(image.jpg) no-repeat 0px 0px;
}
a.two {
width: 100px;
background: url(image.jpg) no-repeat -100px 0px;
}
a.three {
width: 100px;
background: url(image.jpg) no-repeat -200px 0px;
}
a.four {
width: 100px;
background: url(image.jpg) no-repeat -300px 0px;
}
Note that background position is different for each class, since we need to display different parts of the image. See the grid. For example, link four image starts at 300px from the left, but in the CSS, we need to add minus 300px.
Now let's set the background-position when someone mouse over the links. We'll keep the "x" position but change the "y" ones, by adding -50px to display the second image (green).
a:hover.one {
background: url(image.jpg) no-repeat 0px -50px;
}
a:hover.two {
background: url(image.jpg) no-repeat -100px -50px;
}
a:hover.three {
background: url(image.jpg) no-repeat -200px -50px;
}
a:hover.four {
background: url(image.jpg) no-repeat -300px -50px;
}
We're done! You can see the rollover in action on this page.
CSS Rollovers sample file (1.9 KB, 582 hits)
16 Responses to “CSS Rollovers”
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)
hey hey. had always loved your tutorials. but for this roll over tutorial, i don't quite understand. should both the copy and the original text be above and below each other like what your picture had show or should it be below the layer? hmm. the html code is confusing too, cos ima a noob. sorry for the trouble. :)
Hi! I don't understand what you don't understand XD There should be only one image... You can download the rollover sample files to see! :)
do i need to draw a line to divide them like what you did? if so, what tool do i do it with?
and errrrm, im using wordpress and i couldn't do it with the html you provided. i dont know whats wrong either. :(((( sigh.
no you don't need to draw a line at all XD the final image should look like this! It doesn't matter if you use wordpress or not because these codes need to be in your template files. :)
i added the css part in the stylesheet and the other part where i want it shown, but the picture dont even show. sigh. thanks alot for replying (:
Can you mail me with an url to your codes? :) So that I can see what's wrong
Wowww. Really? haha. Thanks alot ((:
Here's a concern. When a page is printed that has the CSS Rollover, the menu doesn't show up in the print preview or on the page itself. Any way to correct this so it the image used shows up when printed?
The tutorial is great tanks for sharing!
Im having a problem with this rollover though, it just doesnt show, and I think that the way is written here and in http://pootato.org/tutorials/html/coding-a-layout/ is different, maybe that has something to do with it?
Hope you can help me with it!
Thanks a million!
Wow this tutorial worked great for me, its the first time I try rollover images and it work, thankz alot! :)
Nice blog. Thank you.
Thanks so much for this! I have been doing them the hard way in ImageReady for so long! This is a great time saver! Thank you so very much!
Wow this tutorial worked great for me, its the first time I try rollover images and it work,
wow. amazing! thanks for sharing! ;)
Hey there. Love this trick. Thank! I can't quite get it to work in FireFox. IE seems perfect. Is there a tweak?
thanks!