I've found that there are a ton of different ways to create mouseover images/navigation/buttons/whatever and every one of them seems to have some sort of limitations. Some work in FireFox but not IE, some flicker real quick when you mouseover and some rely on JavaScript.
I always try to avoid using JavaScript in my navigations since if for some reason a user on your site has JavaScript disabled they can no longer view your navigation. How are they supposed to navigate your site now!? I think I have found a good all around pure CSS mouseover method which works in every browser I have tested so far (FireFox, IE6/IE7, Opera and Safari).
For this example I am going to explain how to create a basic horizontal navigation using CSS for text replacement and images for the background/links.
The basic idea here is that if the navigation area is 24px high I need to create an image two times that height (48px). In this image I need to include both the "off" and "on" states for the mouseover. Below is an example of such an image.
This 48px tall image will be downloaded once and only the top half of it will be shown until mouseover which will show the bottom half. So pretty much the image slides up 24px when on mouseover and then back to 0px when not on mouseover. A viewport/window area is created to show just one state of the button while hiding the other.
The fact that is loads one image and then slides it up/down depending on mouseover state is great because that eliminates the flickering which might occur on mouseover if the "on" state image needs to be loaded. This will be noticeable with IE6 or if you have a slow connection to the server.
Example Menu We Will Be Creating
Coding The Navigation Through HTML
Before we do any fancy CSS coding we need to lay the ground work for the menu so we start off with coding up an unordered list in HTML. Since we are going to remove the text from the menu we need to give each element a "title" as well as an "id". I also added a "current" element to one of the menu items to show how you can display that menu item as the current page.
<div id="examplenavcontainer">
<ul id="examplenav">
<li title="Home"><a href="#" id="home">Home</a></li>
<li title="About" class="current"><a href="#" id="about">About</a></li>
<li title="Products"><a href="#" id="products">Products</a></li>
<li title="Contact"><a href="#" id="contact">Contact</a></li>
</ul>
</div>
Styling The Navigation List
Now we have to style the unordered list and make it come to life. First off we need to get the navigation to appear inline horizontal and move the text off of the screen so it isn't visible yet still readable by screen-readers.
/* navigation
------------------------------------------*/
#examplenav {
margin: 0;
padding: 0;
}
#examplenav li {
list-style: none;
height: 24px;
float: left;
position: relative;
}
#examplenav li a {
height: 24px;
text-indent: -9000px;
display: block;
}
#examplenav .current a { background-position: 0 -24px; }
Styling The Buttons - Backgrounds
This bit of code handles how the buttons look in the navigation and how they act when in the "on" and "off" mouseover state.
/* buttons
------------------------------------------*/
a#home,
a#about,
a#products,
a#contact {
width: 96px;
height: 24px;
}
a#home { background-image: url(images/button_home.jpg); }
a#about { background-image: url(images/button_about.jpg); }
a#contact { background-image: url(images/button_contact.jpg); }
a#products { background-image: url(images/button_products.jpg); }
a#home:hover,
a#about:hover,
a#contact:hover,
a#products:hover
{ background-position: 0 -24px; }
Navigation Links of Different Widths
As you may have noticed I set all of the images for the navigation to be 96px wide. You can make them each different widths if you'd like and you would just alter the code I have here a little bit. Just remove the "width: 96px" from the "a#home, a#about, a#products, a#contact" div and add the specific widths to the "a#home", "a#about", "a#products" and "a#contact" divs along with the background location.
This same technique can also be applied to single images placed anywhere on your site not just for navigations.
Conclusion and Source Files
If my directions made sense and you were able to follow along it should come out looking like this.
There are many ways to go about what I described about so please keep an open mind and do what works best for you. I like this way especially because I can create one image per element and that one image has "off" and "on" states, no need for loading two images for one element anymore.
Also be sure to download the source files I created from this example so you can pick it apart and see how it all works. I also included the .PSD for the images just in case you wanted to use them elsewhere.
Please feel free to modify/hack/use and abuse these files to whatever need you find fit. If you have another method for doing mouseover images please let me know so I can check it out. I'm always looking for new and better ways to do my work so all information will be helpful.
