Ruined My Life

Correct, Non Preloading CSS Image Rollovers

Blogged in Web Design, Internet by Matt on Thursday June 22, 2006

In a previous post I touched on and provided some code for CSS Image Rollovers. That code worked properly in Internet Explorer, with a pre-loading script. Through doing some more reading and tinkering I’ve decided to share the “best” way to implement the effect for cross browser compatibility.

This time around we’re going to use Unordered Lists to hold our “navigation header” while also holding the individual rollover effects per link. In fact if you take a glance over to the right side of this page, the menu uses the same technique, except I’m not using a background image for the rollover effect. This time around instead of switching images based on element state (hover, active, so forth) we are going to move the background images position to give us a “rollover” effect.

The advantages to using a single image and moving its background position for Image Rollovers are numerous. First of all there is no preloading necessary as only one image is used. CSS Based Image rollovers that use multiple images work “fine” in most browsers, however with Internet Explorer the site will “load” each time that rollover is used, and if images haven’t loaded with other browsers the rollover effect may be missing. Now that we understand the reasoning behind using a single image, let’s get started!

The Code

HTML Code for Rollover Effect

<ul class=”menu”>
<li class=”head”>Navigation Title</li>
<li><a href=”http://www.yay.com”>Link 1</a></li>
</ul>

In the above snippet of code you see the HTML markup that we use to display the “Menu” system in. You’ll notice that the whole menu is enclosed in a UL element, denoting it as the “parent”, you will see how the parrent class is used in the style sheet. To begin the menu we need to dictate where it goes on the page and immediately create the UL with a class titled menu. Once we create the UL we need to create a LI with the class of head. By creating the LI with a class of head we are able to dictate where the “header” of our navigation menu goes. Make sure you close your LI with a </li>!
Once you have the UL created as well as the LI with a class of head, it’s time to start adding the individual menu elements. To do this we just simply create links inside of a LI element. Add a separate LI for each link you create. That pretty much wraps up the HTML part of the image rollovers, let’s move on the CSS portion.
Cascading Style Sheet Snippet

ul.menu {
width: 200px;
list-style: none;
padding: 0;
margin: 0 auto;
}

ul.menu li{
display: block;
margin: 0;
padding: 0;
width: 175px;
padding-left: 25px;
background-image: url('yay/yay.png');
background-position: 0;
}

ul.menu a, ul.menu a:visited, ul.menu a:active {
color: #000000;
text-decoration: underline;
}

ul.menu a:hover {
color: #8B877B;
text-decoration: none;
font-weight: bold;
background-position: 0 -25px;
}

ul.menu li.head{
display: block;
margin: 0;
padding: 0;
width: 190px;
background-color: #B9CFD5;
font-weight: bold;
padding-left: 10px;
}

Immediately you’ll see that there is a lot more code to the CSS portion of these rollovers. As we move through the code it’ll become a simple task. In the above snippet, you will see that ul.menu precedes all entries defining all elements as a part of the specified class. What this does is let’s the browser know that any element inside of the specified class should be rendered as set in the Stylesheet. To begin, ul.menu is the “main container” that all of the LI’s will reside in. By setting the width we are able to “shape” the buttons to the exact size that we want, you’ll also notice list-style: none; is in the stylesheet. Using list-style: none; instructs the browser to not insert bullets in front of each LI.

Putting it All Together

Once we have our parameters set for our UL Class, menu, it’s time to move on to making the actual Image Rollovers! To start we need to have a header for our menu, in this case the “header” is a LI with the class of head. In this case we’re using a solid color as the background of our menu header. The size elements of your menu header need to relate with your ul.menu class, we’ll talk about overall uniformity here in a bit.
Once we have our menu header ready to go, we start by adding our individual menu items. In the Stylesheet above you will see that all “menu items” are a LI, so let us begin by looking at the ul.menu li entry. When you would like to add a menu item or perhaps just a good ol’ heading, we will just use a LI within our unordered list. You’ll see according the style sheet that the background image is in a fixed position when being used as a link. Once we have the link placed inside of the LI we’ll want it to proceed to do a “image rollover” when the mouse passes over it.

In the CSS markup above you will see the entry ul.menu a:hover, this is where the rollover effect happens. When a user moves there mouse over a link that’s held within our Unordered List the CSS code moves the background in it’s declared direction to make the “rollover” happen. Depending on how you create your background image will dictate which direction you move the image.

Conclusion

This technique may seem a bit daunting or complicated at first; however after going over it once or twice you will have it down pat. By using the above technique you can ensure your site loads correctly across numerous browsers without need of a Preloading JavaScript. If you have any questions or comments, or just need some help drop a comment and I’ll get back to you.

Popularity: 100% [?]

Share This

---