CSS Image Rollovers »
Despite the billion tutorials on this subject, I am going to demonstrate the easy way when it comes to block navigation. No moveable backgrounds or scripting necessary. Just good old fashioned markup, here to save the day with cross compatibility. Basic HTML and CSS knowledge is a requirement, and those skills can be easily brushed up on at W3 Schools. I am going to use a horizontal column for this particular sample.
I am going to start with an image of what it is going to look like:
A truly magnificent piece of design. Now I am going to create a solid image of the rollover effect:
I am using a subtle effect because I want my rollovers to move with the same stealth as ninjas. Also it is less confusing for the visitor and creates a more consistent and navigable interface whilst incorporating a moderate level of interactivity.
At this point, I slice up the normal view (the first one) into separate images. However, I leave the hover effect intact as one image. Using my example, there are now five sliced images for each piece of text and one block image of the hover effect. This is where the trickery and witchcraft comes in.
The basic navigation is the first thing I code.
<ul id="navigation">
<li class="home"><a href="home.php" title="Home"><span class="hide">Home</span> </a></li>
<li class="about"><a href="about.php" title="About"><span class="hide">About</span> </a></li>
<li class="righto"><a href="righto.php" title="Righto!"><span class="hide">Righto!</span> </a></li>
<li class="tea"><a href="tea.php" title="Tea"><span class="hide">Tea</span> </a></li>
<li class="weather"><a href="weather.php" title="Weather"><span class="hide">Weather</span> </a></li>
</ul>
Notice there is a space after the spanned text — it is necessary so do not exclude it. Now we have got our navigation set in HTML, it is time to move onto the CSS. Each image has a logical name:
#navigation {background:url('hover.gif') no-repeat; width:150px; height:200px;}
#navigation li {display:inline; list-style:none;}
#navigation li, #navigation {padding:0px; margin:0px;}
.home a {background:url('home.gif'); height:43px;}
.about a {background:url('about.gif'); height:38px;}
.righto a{background:url('righto.gif'); height:35px;}
.tea a {background:url('tea.gif'); height:38px;}
.weather a {background:url('weather.gif'); height:46px;}
#navigation a {display:block; width:150px;}
#navigation a:hover {background:none;}
.hide {display:none;}
If you want something particularly fancy you can have ‘clickable’ rollovers using the :active pseudo-class. For vertical rollovers a little more playing about is necessary, mostly with the width and the little bit that says ‘display:block’. Download a working sample in case the above made no sense. If you make a rollover using this tutorial it would give me great pleasure to see it. Show some love and either contact or link me — who knows maybe I will link you right back in this tutorial.
Why are you using classes for your list items? Surely if there’s only one of each per page, you could use an ID instead?
And you probably could have used
#navigation a {} instead of the long list you have at the moment.
I’m going to be quiet now. *goes to cupboard and makes hugs own rollover tutorial*
REPLY: Having it as an ID instead of a class isn’t of imperative importance, right? But #navigation a {} is a better idea than listing all the classes! Doh! *will change*
Nice tutorial :) I’m using a different code but still – I like your tutorial. You should write more!
REPLY: I doubt I’ll write many more since everything has been done! After some brief research this method didn’t show up so I figured sharing is caring :D
What about accessibility? Those poor people who have vision troubles or use a screen reader won’t be able to navigate!!!
REPLY: It’s lovely to see you again Nick :D Jakob Nielsen enthusiast much are we? There is alternative text hidden by the span tags, so when CSS is disabled the images are replaced by text. Not sure how screen readers work entirely but technically they should pick up on that sort of thing, right?
I didn’t understand the last comment from “Cyber Surfer”. What’s he talking about?
REPLY: Forgive him, he’s Canuckian :P
Oh, pardon me ^_^;
Some people have disabilities, have images disabled, use a screen reader, etc. which might make an image rollover unreadable or unusable, so it’s important to have an accessible alternative.
I was just being silly and picking at Lil’s solution ^_^; I did include a novelty tag to indicate I was just joking… but it seems to have been stripped out.
REPLY: Pshaw :P
This is great! Really useful too!
Oooh I hope you write MORE tutorials! Clever girl!
REPLY: More tutorials? Maybe sometime in the next ten years – by then I may have discovered some trick worth sharing :)
I’m going to bookmark this post for future reference. Thank you :).
Ouuu, I’ve never thought/heard of it being done this way (i.e. with the hover image as the background and non-hover image on top). Thanks for helping me discover something new! :)
This is a great tutorial, and I also love the way your navigation is right now.
(off topic) I’ve never had any August people born into my family ever, what are they like? Are you born in August?
Oh I just read your birthday is 26th August, my baby is due on the 20th :D
Ooohhh I’ll try this out. In the middle of a ‘revamp’ so to say. Noooo really. This time I mean it. *gets back to being unlazy*
REPLY: Haha awesome, would love to see a layout which uses this tutorial. ;)
I’ve been using a solution along these lines, but a problem I’ve noticed with my approach (and yours too) is that while it’s fine if someone disables CSS or uses a screen reader, things get a little iffy if someone is browsing with images disabled.
Most modern web browsers can do this. For a quick Firefox example, go to Tools > Options > Content, and then untick ‘Load images automatically’.
You’ll notice that the links in your sidebar now show as a blank area, albeit are still clickable. This is because the CSS is still enabled and thus pushing the text out of sight.
I do love the CSS way of doing rollovers so if anyone can think of a way of bending this method to support people browsing with images disabled (includes quite a few people I imagine, especially mobile/unusual devices) it’d be very useful and would totally bulletproof this method. :)