Help
for Church Webmasters
Issue
22
5/25/03
In Issue 13 I talked about
rollovers and how many people use them for navigation and changing their
buttons as a user moves the mouse over the button. I also pointed out that this
is rather useless, as the user already knows he has moved the mouse over the
button (he’s looking at the screen!). I also gave a few ideas of some other
uses for rollovers, most of which were for purely entertainment value on your
website. Now there’s nothing wrong with the “entertainment value,” after all web
surfing should be fun. But there are some useful applications of this
technology too.
Imagine a graphic with some text
links next too it, and as you move the mouse over the text links, various items
highlight in the graphic. This could have real value on your website. Maybe the
graphic is a map of your facility and the text links are various rooms. As you
move your mouse over the text links for the rooms, the room is highlighted on
the map. That would be cool and useful. Maybe you have a group picture. You
could list the people next to the picture and as you move your mouse over the
names the correct person is highlighted. That would be far more interesting
than the standard left to right, front to back listing.
The highlight in the graphics can
be as simple or complicated as you want it to be. There could be a couple of
possibilities in our previous two examples. In the map example we might
highlight the rooms by filling them with a color or by using a glow effect in
our graphics program. In our group picture example, we might highlight the
people by simply drawing a circle around the person or by making the entire
picture black and white and just leaving the highlighted person in color. You
are basically only limited by your imagination and your graphics program (or
you knowledge of it).
There are a couple of steps that
you need to do. Each step is fairly straightforward and I am going to provide a
few code snips that you can use to get you started.
You are going to make multiple
copies of your image that you want to do the highlighting on. So get the
original image edited and sized correctly before starting. For better results,
make the image size (in bytes) as small as possible. This will be the image
that is displayed when the page first is loaded and whenever the mouse is NOT
over one of the text links.
Now take the original image and
edit it for each highlighted image. Using our map example, make a copy of the
map with one room highlighted and save the image. I usually use the original
file name and simply add a number to it – filename1.gif, filename2.gif,
filename3.gif, etc.
Paste the follow Javascript in the
<head> section of the webpage. Modify for your image names. Add more
sections as needed for additional highlights.
<script language="JavaScript">
<!--
prodOff = new Image();
prodOff.src = "your_original_file.gif"; // your original picture
prod1on = new Image();
prod1on.src = "your_file_name_highlight_area_1.gif"; // change these to highlight file names
prod2on = new Image();
prod2on.src = "your_file_name_highlight_area_2.gif";
prod3on = new Image();
prod3on.src = "your_file_name_highlight_area_3.gif";
prod4on = new Image();
prod4on.src = "your_file_name_highlight_area_4.gif";
function rollon(x) {
imgOn = eval('prod' + x +"on.src");
document ['prod'].src = imgOn;
}
function rolloff() {
document ['prod'].src = prodOff.src;
}
// -->
</script>
This is the code for the
<body> of the webpage. Place where you want the links to show up. Again,
add more sections if you have more than 4 links.
<a name=”your_highlight_name”></a>
<a onmouseover="rollon(1); return false;" onmouseout="rolloff(); return false;" href=”#your_highlight_name”> Flowery text relating to highlighted area 1</a><br>
<a name=”your_highlight_name2”></a>
<a onmouseover="rollon(2); return false;" onmouseout="rolloff(); return false;" href=”#your_highlight_name2”> More Hyperbole.</a><br>
<a name=”your_highlight_name3”></a>
<a onmouseover="rollon(3); return false;" onmouseout="rolloff(); return false;" href=”#your_highlight_name3”> More Stuff</a><br>
<a name=”your_highlight_name4”></a>
<a onmouseover="rollon(4); return false;" onmouseout="rolloff(); return false;" href=”#your_highlight_name4”> spin text</a><br>
The <a name=”your_highlight_name”></a> line makes a bookmark on the page with the name
your_highlight_name. The second line makes a href to #your_highlight_name with
basically links to the bookmark. Since these lines are right next to each other
on the page, essentially nothing happens when the user clicks on a link. If you
want the link to take the user somewhere, the change the #your_highlight_name
to www.whatever.com. Although I am hard pressed to come up with a reason why
you would want to do this.
Here is an example that you can
see online. http://www.quickshot.com/genx/main_500usb.html.
This example would be closer to our example of the map. This site uses frames. So
if you want to see the code, right click over a blank area by the text links
and select view source.
At this point, your imagination is
the limit. When using this technique, do be aware that you need to transfer
several images, so make the images small to help those on slow connections.
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. 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 web page! You can link to “Help for
Church Webmasters” at http://www.downeychurch.com/HelpForChurchWebmasters.html