 |
|
| 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. See ya next time,
Bill |
