teddY-risatioN™

You might have been thinking about using Adobe Flash (in case you didn’t know, Adobe bought Macromedia) to create a .swf file which allows you to display dazzling rollover effects. That’s perfectly fine, but when it comes to faster loading time, simplified effects and crossbrowser compatibility, rollover effects achieved by simple CSS and (X)HTML code beats it hands down. If you’re ready to go, don’t stop reading!

Take Two

Of course you can stick to just simple text for your links, but what if you adore a more sophisicated, user-friendly and attention-grabbing list of links? There are actually two ways to achieve the rollover effect - one is instructing the browser to load a separate background image when you hover your mouse over the link, the other is simply ask the browser to alter the coordinates of the background image. Maybe this illustration will help clear things up a little:

Personally I prefer the latter for a few reasons:

• Reduces the number files the browser needs to load
• Need not load two images separately (inactive and hover states)
• Rollover effect works perfectly when you’re disconnected
• No flickering effect in Internet Explorer

Make your own rollover icons

Since I’m yet to learn how to create icons, I usually use certain icons from other marvellous, free-of-charge icon packages generously shared by their respective designers. I would recommend the following:

• FamFamFam Mini Icons - if you like small, nifty ones, this is it!
• Dropline Neu! - glossy icons that come in many different sizes.
• Vista Icons - icons from the latest Windows OS
• iPhone Handdrawn icons - woah this set is going to be classic! I just love it.

Of course you can google for more icons, there are a lot more out there, for free! But of course, please do remember to give credits to the icons’ respective owners - be appreciative and respectful of their ownsership (copyright, anyone?) and effort.

Let’s say, you want to start off with a RSS icon. Well what you need at hand is a simple image editor, like Gimp or Photoshop (I’m not sure whether Paint does offer so much functionality). Since I’m so bad at Gimp, I guess my only option is Photoshop huh? Right click to save the gigantic version (320*320, it’s HUGE!)

Step 1: As usual, open the image

Just like what you’ll usually do, drag and drop the image file into Photoshop workspace. If there happens to be any transparent area (don’t forget this especially if you’re working with PNG icons!), create a new fill layer by going to Layer > New Fill Layer, and make the fill colour same as the background colour of the page you’re intending to use your icons.

Step 2: Double the height

Now what we’ll want to do is to double the height of the canvas. This can be done by going to Image > Canvas Size or by punching in Alt + Ctrl + C. Multiply the original height by 2 (in this case, the original height is 96px so it’ll be 192px) - simple maths, it’s as easy as that. And before you proceed, don’t forget to make sure that the canvas size expands downwards (just click on the arrows, shown in the screenshot above). When you’re done, you should see this:

Step 3: Duplicate image layer

Right click on the image layer and select Duplicate Layer, and poof, you’ll get an identical copy of the image. Nudge it towards the blank area of the canvas. Since you’ve doubled the height, the two icons should fit perfectly in the canvas now.

Step 4: Determine the rollover effect

So now what you really need to do is just to think of what rollover effect you want to achieve. Do you want the icon to get bigger / smaller, or do you want it to become clearer? It all depends on you. For this example, I’ve decided to decrease the opacity of the top icon to 50%, so that it appears faint at first, but when you hover your cursor above it, you’ll see the icon clearly. This effect is identical to that of the top-right navigation bar of this page (this may not be true if I’ve changed themes). Remember to save!

Pain in the butt coding and styling

Now the problematic part. What should I do to materialise the rollover effect? You can’t possibly plop the image somewhere and expect it to happen by itself. So, we’ll need CSS and XHTML to help us out. This is what we want to do:

• Create a list of links, you can use either the <ul> or <li> tags
• Make sure that CSS loads the images into the links
• Create rollover effect with CSS
• And you’re done!

(X)HTML coding Now we’ll create a list of links using XHTML coding. It’s actually quite simple!

1. <ul id="navigation" class="clearfix">
2. <li><a href="#" title="RSS Feed" id="rssfeed">RSS Feed</a></li>
3. *You can add more if you wish, but remember to get the id correct!
4. </ul>

Don’t forget to change the link from “#” to something else! For example, if you’re linking your blog feed, copy and paste the link inside the quotation marks after the href tag.

Tricky CSS
This is the harder part, but don’t worry, I’ll try my best to guide you through.

1. .clearfix:after {
2. content: ".";
3. clear: both;
4. display: block;
5. height: 0;
6. visibility: hidden;
7. }
8. /* Hides from IE-mac \*/
9. * html .clearfix {height: 1%;}
10. /* End hide from IE-mac */
11. #navigation {
12. background: transparent;
13. margin: 0;
14. padding: 0;
15. width: 100%;
16. }
17. #navigation li {
18. float: left;
19. list-style-type: none;
20. }
21. #navigation li a {
22. display: block;
23. margin: 0 3px;
24. padding: 0;
25. height: 96px;
26. width: 96px;
27. text-indent: -9999px;
28. }
29. #navigation li a#rssfeed {
30. background: url(images/rssfeed_bg.jpg) no-repeat top left;
31. }
32. #navigation li a#rssfeed:hover {
33. background-position: bottom left;
34. }

I shall explain the code bit by bit

.clearfix:after

• *This is the holy hack!
• Of course you can always opt to insert <br style="clear: both" /> at the end of the floated element but it’s messy and unsightly. So this is the clean way to fix it without any additional markup.
• The code is actually from here, they say it’s a little old, but hey, it works!

#navigation

• background - I usually set it to transparent by default, but you can always specify the colour or background image you want for the element. To have a background color, use: background: #xxxxxx; where xxxxxx stands for the hexadecimal colour code. For image, use: background: url(imageurl) top left no-repeat;. If you want to repeat the background, you can repeat it horizontalll: repeat-x or vertically: repeat-y.
• padding and margin - feel free to change the values of these elements to suit your page. Usually I’ll set both to zero, unless other reasons call for it to be changed.
• width - set to a value in terms of pixels or percentage to your own liking. Since I usually wrap the entire list in a <div> container, I set the width to 100%.

#navigation li

• float - float:left: is used so that the each component of the list will stack up against each other horizontally and not the conventional vertical arrangement.
• list-style-type - it is set to none because you wouldn’t want to see the ugly little bullets floating around right?

#navigation li a

• margin - this represents the spaces between each tab.
• height and width - if you’ve noticed, they are set to the original size of the icon (not the modified canvas size!).
• text-indent - intentionally set to -9999px, this causes the text between the <a></a> tags to be displaced way beyond any monitor on earth but not removing the text. This is to make sure that text readers can find your RSS feed as well (they don’t read images).

#navigation li a#rssfeed

• background - I’ve specified the CSS script to load the image rssfeed_bg.jpg from the images folder, relative to the directory where the CSS file has been placed in. The background is not repeated (the no-repeat statement) and the image is positioned at the top left corner (alternatively, you can use top center) so that the upper half of the image is displayed.

#navigation li a#rssfeed:hover

• *This is the key to the rollover effect
• background-position - it has been altered to bottom left (you can use bottom center as well), so the bottom half of the image is displayed.

See it live!

You can see this styling (not identical but similar) being in use on a rollover effects demo page!

Rollover Effects with CSS | 177 hits | 4 KB

There are two examples in the page, be sure to check them out! They are actually variations of the original styling and coding I’ve provided. Feel free to experiment with it!

Hope you find this tutorial useful!