| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |
You can use these links to scroll to individual topics
Code in the <head> section
Using just onmouseover or onmouseout
Different image in onmouseout
Using onclick
Using onmousedown and onmouseup
Images with different sizes
Making images appear and disappear
Using onmouseover in the <img> tag
The <head> section for these examples contains the usual code for preloading images and for defining preloadImg() and swapImg(). This code is identical to that on the previous page except that a few more images are preloaded.
<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 ("skin04.jpg");
var gmSkin04n = preloadImg ("skin04n.jpg");
var gmSkin02 = preloadImg ("skin02.jpg");
var gmTrans = preloadImg ("transdot.gif");
var gmWolf = preloadImg ("wolfmail.jpg");
//--> </script>
If you include an onmouseover attribute but omit the onmouseout, the image will change the first time the mouse moves over the image and won't change back.
<a href="#"
onclick="return false;"
onmouseover="swapImg ('im1', 'gmSkin04n');">
<img src="skin04.jpg" width="185" height="185"
id="im1" name="im1" border="0" alt="Skin #4" /></a>
Similarly, if you include onmouseout but omit onmouseover, the image will change after the mouse moves over the image and leaves it, and won't change back.
Most of the time you'll want the onmouseout to restore the original image that was there before the onmouseover. But it can be an entirely different image if you prefer.
<a href="#" onclick="return false;"
onmouseover="swapImg ('im2', 'gmSkin04n');"
onmouseout="swapImg ('im2', 'gmSkin02');">
<img src="skin04.jpg" width="185" height="185"
id="im2" name="im2" border="0" alt="Skin #4" /></a>
You can also use onclick to change your image. onclick fires when the mouse if moved over the image, then the left (or only) button is pressed and released.
If you're using the image as a link, the onclick will look just like the onmouseover and onmouseout that we've been using. If the image is not a link, you'll also need to include the "return false;" that we've been using.
Here's an example:
<a href="#" onclick="swapImg ('im3', 'gmSkin04n'); return false;">
<img src="skin04.jpg" width="185" height="185"
id="im3" name="im3" border="0" alt="Skin #4" /></a>
Of course, you can use onclick in combination with onmouseover and/or onmouseout:
<a href="#" onclick="swapImg ('im4', 'gmSkin02'); return false;"
onmouseover="swapImg ('im4', 'gmSkin04n');"
onmouseout="swapImg ('im4', 'gmSkin04');">
<img src="skin04.jpg" width="185" height="185"
id="im4" name="im4" border="0" alt="Skin #4" /></a>
onmousedown fires when the mouse is moved over the image and the left (or only) button is pressed - unlike onclick, which doesn't fire until the button is then released. onmouseup fires when the button is released. onmousedown and onmouseup are only supported in IE 4+ and Netscape 4+, so your Netscape 3 visitors won't see these effects.
<a href="#" onclick="return false;"
onmousedown="swapImg ('im5', 'gmSkin04n');"
onmouseup="swapImg ('im5', 'gmSkin04');">
<img src="skin04.jpg" width="185" height="185"
id="im5" name="im5" border="0" alt="Skin #4" /></a>
Notice what happens if you move the mouse cursor over the image and press the button, but then drag the mouse off the image before you release it. Now press the button again and move the cursor back over the image and release it.
You can, of course, use one or both of these in conjunction with onmouseover, onmouseout and onclick. Just remember that Netscape 3 supports these three, but not the onmousedown and onmouseup.
If you include width and height attributes in the <img> tag, you cannot change the size of the image when you display a different image. If you substitute a diffent size image, the browser resizes it to fit. The following two images each specify the other as an alternate:
<a href="#" onclick="return false;"
onmouseover="swapImg ('im6', 'gmWolf');"
onmouseout="swapImg ('im6', 'gmSkin04');">
<img src="skin04.jpg" width="185" height="185" align="middle"
id="im6" name="im6" hspace="50" border="0" alt="Skin #4" /></a>
<a href="#" onclick="return false;"
onmouseover="swapImg ('im7', 'gmSkin04');"
onmouseout="swapImg ('im7', 'gmWolf');">
<img src="wolfmail.jpg" width="101" height="69" align="middle"
id="im7" name="im7" hspace="50" border="0" alt="thewolves" /></a>
If you do not include width and height, different browsers handle different size images differently. Netscape 3 and 4 maintain the image at the same size, just as if you had included width and height. IE and Netscape 6 will change the displayed image to fit the new image size: they will reflow the page, causing other elements to move around on the page. Notice how this can be problematic when you change to a smaller image: if you move the mouse cursor just barely inside the larger image, it will not be inside the replacement smaller image and onmouseout may fire. The images might alternate continuously even though you aren't even moving the mouse.
<a href="#" onclick="return false;"
onmouseover="swapImg ('im16', 'gmWolf');"
onmouseout="swapImg ('im16', 'gmSkin04');">
<img src="skin04.jpg" align="middle"
id="im16" name="im16" hspace="50" border="0" alt="Skin #4" /></a>
<a href="#" onclick="return false;"
onmouseover="swapImg ('im17', 'gmSkin04');"
onmouseout="swapImg ('im17', 'gmWolf');">
<img src="wolfmail.jpg" align="middle"
id="im17" name="im17" hspace="50" border="0" alt="thewolves" /></a>
There are two images below. The left one is invisible to begin with and appears when the mouse moves over it. The right one is visible, but disappears when the mouse moves over it.
<a href="#" onclick="return false;"
onmouseover="swapImg ('im8', 'gmSkin04');"
onmouseout="swapImg ('im8', 'gmTrans');">
<img src="transdot.gif" width="185" height="185"
id="im8"name="im8" hspace="50" border="0" alt="Skin #4" /></a>
<a href="#"
onclick="return false;"
onmouseover="swapImg ('im9', 'gmTrans');"
onmouseout="swapImg ('im9', 'gmSkin04');">
<img src="images/skin04.jpg" width="185" height="185"
id="im9"name="im9" hspace="50" border="0" alt="thewolves" /></a>
This trick is done by using an image that is a transparent gif. My transdot.gif is a 1-pixel by 1-pixel image that I can stretch to the desired 185x185 by simply including the width and height tags in the <img> tag.
If you need a transparent gif, just right-click anywhere in the following box and save it:
If you're using a rollover for an image that is not a link, you can put the onmouseover, onmouseout, onclick, onmousedown and onmouseup right in the <img> tag and get rid of the <a href> tag. However, this only works in IE 4+ and Netscape 6+. Your Netscape 3 and 4 visitors and your Opera visitors won't see the rollover.
<img src="skin04.jpg" width="185" height="185"
alt="Skin #4"
onmouseover="this.src = gmSkin04n.src;"
onmouseout="this.src = gmSkin04.src;" />
Notice how much simpler the code is this way. Not only can you get rid of the <a href> tag, but you can eliminate the border, id and name attributes from the <img> tag. You don't need name because you can use this.src to refer to the image's URL. You don't need to include the if (document.images) test before doing the substitution because all browsers that support onmouseover etc. in the <img> tag should support the image object.
It's too bad that Netscape 3 and 4 don't support this method. On the other hand, you'll usually be using rollovers with linked images and need the <a href> tag anyway.
| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |