Stupid Tricks with Rollovers

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.

Step 1:

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.

Step 2:

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>

Step 3:

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