The Ultimate Rollover Tutorial (with CSS image sprites)

First cB tutorial, so bear with me as I bore you all to death.

Before jumping into it, we should know the difference between image sprites and regular images. Normally, people use individual images for rollovers. Say, for example, we have 3 links, with 6 images (3 for regular state links, and 3 for when you hover over the link with your mouse).







Total size of these images together: 6.48 KB. Doesn't seem like a lot of space to use, but the problem is that browsers need to make 6 different connections to a web server to download those images. Using sprites, we can put all of the images together, which will make them smaller and faster.



Total size: 4.74 KB, and 1 connection to download it, all for the same set of images. Over time, you'll save loads of bandwidth, and your site (or Myspace profile, or wherever you use the links) will be faster.

How do you turn that image into a bunch of links? It's just like working with regular hover images; the only difference is, you'll move the background around where you want it to be.

Let's put our links in a container:


We really should be using an unordered list () instead of a div, but it'll work just the same either way. Also, I'd normally use IDs instead of classes, but most people here are looking for Myspace help, and Myspace doesn't allow IDs. So we'll use classes. Wee.

As for the CSS, we'll deal with all links inside the "navigation" div. If you're working with Myspace profile 1.0, put your CSS between tags, and put the finished code inside your "About Me" section (or "Bio" section for band profiles). For Myspace profile 2.0, put the CSS in your "Custom CSS" section (under the "Customize Profile" link) and the HTML in your "About Me" section.



The CSS code gives all links inside the "navigation" div a background image as the sprite image. The display: block; property lets us give them height and width dimensions, and the text-indent: -9999em; property just moves the text off the screen so you can't see it (who wants regular text on their snazzy image links, right?). The height is the height of each link, not the height of the "navigation" div. The background image is set up like this (obviously blown up to make it easier to see):



For individual links, we just need to position the background accordingly (goes with the CSS for the "navigation" links).



This is saying when the "home" link is in its regular state, position the background at 0 pixels on the horizontal axis and 0 pixels on the vertical axis, which is the very top of the image. Because we have a set height and width (16px high and 100px wide), we don't need to worry about the background repeating).

When you hover over the home link (.home:hover), position the background a 0 pixels horizontal, -16 pixels vertical. The negative sign moves the image upward.

For the rest of the links, just follow the same method of figuring out how far down to move the background.

Putting it altogether, your CSS should look like this:


And that's it! Fast, easy rollover links. Obviously you can use any images you'd like, with any dimensions. If you need to move the background image left or right, use positive numbers to move left, and negative numbers to move right. (It's backwards from methods of using absolute positioning to move something around.)

(And yes, Mike(plyts), that is the Delicious font family.)

whoa. love it.

Amazing. Totally linking this from now.

Author	fixtatik
Submitted on	Oct 23, 2009
Page views	13,522
Favorites	10
Comments	2
Reviewer	Mike
Approved on	Oct 23, 2009

hover links, rollover, images, sprites