Help for Church Webmasters
Issue 13
05/15/02
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 webpage 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! 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 into “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.
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!
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.
Now their example uses color instead of images, but you get the 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
and 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.
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)
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.
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.
Next time we will talk about how to dress up your navigation scheme
without rollovers.
See ya,
Bill
<><
<><
<><
<><
<><
<><
the fine print…
Everything in this newsletter is freely distributable – unless otherwise
noted. Please forward to your friends.
Send me an email (webmaster@downeychurch.org)
if you would like to get your own copy of this newsletter. It is published
whenever I find something of interest to send out – roughly twice a month. Feel
free to send me ideas, questions and suggestions for future issues.
Previous issues are available at http://www.downeychurch.com/HelpForChurchWebmasters.html.
If you would like to be removed from this distribution list, please send
me an email and let me know.
It would be way cool if you could mention this resource somewhere on
your webpage! You can link to “Help for Church Webmasters” at http://www.downeychurch.com/HelpForChurchWebmasters.html