WEB DESIGN -- Mouseovers & Rollovers

Author: David Buxton

Rollovers, Mouseovers, Whatever…

I am frequently asked about how to do rollovers. Usually some webmaster thinks this will make their website more dynamic. Rollovers (some people call them mouseovers) are what happens when you move your mouse over an image on a web page and the image changes. I am sure you have seen this happen. You wait for a page to load… and you wait… and you wait… and finally buttons start appearing for the links to the different pages in the site. And when you move your mouse over one of the images to click, low and behold, it changes to a different color. Wow! Wasn’t that cool?

NOT COOL!

You have just made the guest on your website wait while two images for each navigation button download. You have potentially doubled the time to download your page… for what? So that when I move my mouse over a button it changes color? Are we as webmasters so superior that we have to let people know when their mouse is over a button by changing its color? We can’t trust them to tell by looking at the screen that their mouse is over a button?

You will have to excuse my sarcasm. I was trying to take an extreme view to make a point. But when you stop and think about it, there is some truth here. While having buttons change as a person moves their mouse does have some coolness factor, it is largely ineffective. It makes the page longer to download (especially for those webmasters who don’t do a good job of making small images). And it is an effect that is seen all over the web, so it is not all that cool anymore. You haven’t made your page more useful, you haven’t made your page cooler, and you certainly haven’t made your page faster to download. So what have you done? You fallen for the “let’s keep up with the Jones” trap. Somebody else did this on their website so you want to do it to. Probably not the best reason to do something. Maybe when every person in the world has a fast internet connection, rollovers won’t be such a bad idea. Until then save your bandwidth for something useful.

Mouseover Photo Thumbnails

Before I completely convince you that rollovers are a bad idea, there are times where they are useful. It’s just that navigation buttons are NOT one of them.  Consider this. You have a bunch of pictures from the church picnic that you would like to display. How should you do it? Should you just put all the pictures on the website and make people wait for them to download? Maybe you should reduce the size of the files by cranking up the compression the JPG until the picture is barely viewable and then put them all on one page? What about putting a bunch of thumbnails on the page (that are so small you can hardly see what is in them) and then make the person click to see the ones they want? I think there is a better way. How about putting some decent sized thumbnails (maybe you even crop the original pic to just the interesting part) and as the surfer moves their mouse over the thumbnails display the big picture in another area of the page. That could be kind of cool!

Example Code

Here is an example of what I am talking about.  Like a good computer scientist I never re-invent the wheel when someone else has done the work for me. So this example comes from CodeAve. Here is the code and description of it: http://www.codeave.com/javascript/code.asp?u_log=7022.

Here is the example of what I am talking about - http://www.codeave.com/javascript/rollover.html.

Their example uses color instead of images, but you get the idea.

An Idea

Maybe you could take that HUGE picture of your church on the main page and do something interesting with it. If you combined an image map (we haven’t talked about those yet so you will have to do your own research on that) and rollovers, you could have something interesting. You could simply divide that huge church picture into four pieces and when a person moved over one of the four pieces a different image would be displayed in that portion of the picture. You could accomplish the same effect by using a carefully coded table. Make your table with 2 columns and 2 rows. No cell spacing or spacing between the cells. Also no borders on the table. Now take you picture of the church and cut it into four quadrants. Put one piece of the church in each cell of the table. You might need to set the cell alignment of each cell to “push” the 4 images together in the middle. Now add your rollover code and when a person moves over the top right corner that ¼ of the image would change to something else – say the pastor preaching. The top left corner might be a children’s class. You get the idea.

Another Idea

Here’s another idea. Put that nice picture of Youth Group (or whatever) on your website. You know the one I am talking about. Everyone is smiling and posed just right. Now make a mouseover so that when a person moves their mouse over the picture, they see almost exactly the same picture – except the kids are sticking out their tongues, putting “rabbit ears” behind their friends head or making a funny face. That would be fun. (Could you imagine this effect on the Elders page – too funny!) Now I would spend some time looking around your site for other fun things like that you had done. Of course this is going to take some planning. You will have to take two pictures of an event, the serious one and the fun one.

Here’s how simple that very fun effect would be: (watch the double and single quotes – you have to get them right)

Coding The Link

Step 1. Make a Link:
< A HREF="page1.html" onMouseOver="imagename.src='pic-2.gif'"

Now add:
onMouseOut="imagename.src='pic.gif'" >

This tells the browser that when the mouse is NOT over image imagename, then display pic.gif, which is the original image. If this piece is not there, you will get an error message.

Step 2. Add the Image:
< IMG SRC="pic.gif" NAME="imagename" BORDER=0></a >.

The NAME attribute is important - as the Javascript uses it.

Step 3. Finish:
You have now completed your image rollover. Pretty easy, huh?

< A HREF="page1.html" onMouseOver="roll.src='pic-2.gif'"
onMouseOut="roll.src='pic.gif'" >< IMG SRC="pic.gif" NAME="roll" BORDER="0" >< /A >

NOTE: If you do not want the image to be clickable, remove "page1.html" and replace it with a "#" sign.

A Cool Site

Now you have made your site unique, fun and interesting. You got to make your site “cool” by using a rollover, but you aren’t just like everyone else anymore. Your site is just a bit cooler and more interesting.

Content Contributor

Please don’t hesitate to contact me if you have questions regarding this topic.