| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |
You can use these links to scroll to individual topics
The <img> tag
The <a href> tag
Code in the <head> section
HTML code for the rollover
Within your HTML, define the image with the <img> tag just like you normally do. Assign a unique name for the image, and include both an id and a name attribute that specifies that name (I use names that begin with "im", but you can use whatever naming convention you like). Also include a border="0" attribute. You will be putting the <img> tag inside of an <a href> tag. If you don't include border="0", the browser will display an ugly border around the image.
To get the rollover effect, you have to make a link out of the image by enclosing the <img> tag inside an <a href> tag. If you want the image to actually link to something, specify the <a href> tag just like you usually do. If you don't want the image to link to anything, specify a URL of "#" and add the JavaScript clause onclick="return false;". This prevents anything from happening when the user clicks on the image. If you don't include this, the cursor changes to an hourglass and any animations on the page stop when the visitor clicks on the image.
To make the image change, add two JavaScript clauses to the <a href> tag. Use onmouseover to change the image when the mouse moves over the image. Use onmouseout to change it back when the mouse leaves the image.
In the <head> section, you need three things:
The swapImg() and preloadImg() functions will be identical on all of your pages. The actual list of images to preload will vary. Here's the code I've used for the rollover demo on this page:
<script language="javascript" type="text/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 an image
// Arguments:
// A string containing the name in the <img> tag
// A string containing the name of the preloaded
// image object of the image to swap in
// Author: Larry Coats
//====================================================
function swapImg (zsImg, zsPre)
{
if (document.images) {
var xs = "document." + zsImg + ".src = " + zsPre + ".src";
eval (xs);
}
}
//====================================================
// Preload the images
//====================================================
var gmSkin04 = preloadImg ("images/skin04.jpg");
var gmSkin04n = preloadImg ("images/skin04n.jpg");
//--> </script>
Here's an example of a rollover:
Here's the HTML code for the rollover:
<a href="#" onclick="return false;"
onmouseover="swapImg ('im1', 'gmSkin04n');"
onmouseout="swapImg ('im1', 'gmSkin04');">
<img src="skin04.jpg" width="185" height="185"
id="im1" name="im1" border="0" alt="Skin #4" /></a>
In the onmouseover and onmouseout attributes, swapImg() is called and two arguments are passed. These arguments must be in quotes like shown, or the rollover won't work. The first argument is the name specified in the <img> tag. The second is the name of the image object that you created with preloadImg() when the image was preloaded.
The variables gmSkin04 and gmSkin04n are the image objects that I created with preloadImg() (see the previous page if you need to review this). gmSkin04 refers to the same image (skin04.jpg) that's specified in the <img> tag. gmSkin04n refers to the alternate image.
The document.images test is used in swapImg() to execute this code only if the browser supports image objects, and prevents alerts in browsers such as IE 3 that don't support rollovers.
The other statements in swapImg() perform the actual substitution of the new image.
In the above example, the image wasn't used as a link. The rollover technique is mostly used for images that are links. Here's an example of an image used as a link — in this case, clicking on the image takes you to the top of the page.
<a href="#top"
onmouseover="swapImg ('im2', 'gmSkin04n');"
onmouseout="swapImg ('im2', 'gmSkin04');">
<img src="skin04.jpg" width="185" height="185"
id="im2" name="im2" border="0" alt="Skin #4" /></a>
Notice that the onclick attribute is no longer used, and href specifies the URL of the link (in this case, "#top"). Also, the name is different because each image has to have a unique name.
| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |