| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |
You can use these links to scroll to individual topics
Code in the <head> section
Status Bar Messages
For this example, we need the usual things in the head section: preloadImg(), swapImg(), and the code to preload the images. The version of swapImg() here is a bit different from the earlier versions: it also lets you set a status bar message at the same time you swap images.
<script type="text/javascript" language="javascript"> <!--
//====================================================
// preloadImg() - Preloads an image
//
// Argument: String containing URL of image to preload
// Returns: Image object created for the image
// Author: Larry Coats
//====================================================
function preloadImg (zsUrl)
{
// Prevent alerts in IE 3 and Netscape 2
if (!document.images) return null;
// Create an image object and preload the image
var xo = new Image(); // Create the image object
xo.src = zsUrl; // Set URL - Preloads
return xo; // Return the image object
}
//====================================================
// swapImg() - Swaps one or more images and optionally
// sets a status bar message
// Arguments:
// One or more pairs of strings:
// Name in <img> tag
// Name of preloaded image
// Optionally, a string to display in the status bar
// Returns:
// true
// Lets you code
// onmouseover="return swapImg(...);"
// instead of
// onmouseover="swapImg(...); return true;"
// Author: Larry Coats
//====================================================
function swapImg ()
{
// Count number of name pairs passed
var xiNumPairs = Math.floor(arguments.length / 2);
// If an odd number arguments, the last is a status
// bar message
var xsMsg = "*none*"; // Assume no status bar message
if (arguments.length > xiNumPairs * 2)
xsMsg = arguments[arguments.length-1];
// Set the status bar message
if (xsMsg != "*none*") status = xsMsg;
// Prevent alerts in IE 3 and Netscape 2
if (!document.images) return true;
// Prepare to do rollovers
var xsImg, xsPre; // Receives a pair of arguments
var xiArg = 0; // Counts arguments
// Loop - Once per pair of arguments passed
var xiLoop;
for (xiLoop = 0 ; xiLoop < xiNumPairs ; ++xiLoop)
{
// Fetch the pair of arguments
xsImg = arguments[xiArg++];
xsPre = arguments[xiArg++];
// Swap the image
eval ("document." + xsImg + ".src = " + xsPre + ".src");
}
return true;
}
//====================================================
// Preload the images
//====================================================
var gmSkin04 = preloadImg ("images/skin04.jpg");
var gmSkin04n = preloadImg ("images/skin04n.jpg");
//--> </script>
It's very common to want to set a message in the status bar as part of a rollover. If you don't set a message of your own, the browser displays its own message in the status bar. In most browsers, the default message is the URL of the link.
As you'll recall, our swapImg() function takes pairs of values: the name from an <img> tag and the name of a preloaded image object for the image you want to substitute. It lets you pass one or more such pairs. I've now modified it to accept one additional argument: a status bar message. When you pass an odd number of arguments, the last argument is displayed in the status bar.
If you want to, you can display a default message in the status bar. Look down at the status bar now: you'll find that I've put a default message there. You create a default message by adding an onload handler to the <body> tag:
<body onload="defaultStatus='A silly status bar message';">
If you choose to use a default status bar message, you only need to specify a status bar message in onmouseover. You don't need to remove it in onmouseout — - your browser will automatically replace your message with the default message when the mouse moves away. Here's an example:
<a href="#" onclick="return false"
onmouseover="return swapImg ('im1', 'gmSkin04n', 'My rollover message');"
onmouseout="swapImg ('im1', 'gmSkin04');">
<img src="images/skin04.jpg" width="185" height="185"
id="im1" name="im1" border="0" alt="Skin #4" /></a>
Note how I've added used return swapImg(...); instead of just swapImg(...); in the onmouseover. When you set a status bar message in an on-handler, you have to return a true value so that the browser knows it's not supposed to display its own status bar message. The revised swapImg() function always returns true.
You may prefer to define your status bar messages in the <head> section along with your preloaded images. Just define a variable there, and pass that variable instead of the message string in your call. For example:
In the <head> section:
//====================================================
// Preload the images
//====================================================
var gmSkin04 = preloadImg ("images/skin04.jpg");
var gmSkin04n = preloadImg ("images/skin04n.jpg");
//====================================================
// Status bar messages
//====================================================
var gsStat01 = "My rollover message";
Change the onmouseover to:
onmouseover="return swapImg ('im1', 'gmSkin04n', gsStat01);"
The advantages of defining the messages in the <head> section are (1) all your messages are defined in one place and (2) your onmouseover lines are shorter.
If you chose not to define a default message, you'll probably want to clear the message when the mouse moves away. You can specify an empty message for the status bar message in the onmouseout. Remember to return a true value.
<a href="#" onclick="return false"
onmouseover="return swapImg ('im1', 'gmSkin04n', 'My rollover message');"
onmouseout="return swapImg ('im2', 'gmSkin04', '');">
<img src="images/skin04.jpg" width="185" height="185"
id="im1" name="im1" border="0" alt="Skin #4" /></a>
Many users like to see the URL displayed when they mouseover a link. The URL contains some valuable information. For example, from the URL you can immediately see if the link is going to take you out of this site to another one, to another page in this site, or just to another location on this same page. If you take away good information, replace it with something at least as valuable.
Here are some examples of status bar messages that I consider to be good ones:
On a link to the Yahoo! site: "Leave this site and go visit Yahoo!".
On a link to another page within your site: "Within this site: How to become a millionaire!".
On a link within the same page: "On this page: How to win the lottery!".
| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |