Working with Images
- To create image rollovers.
- To create backward-compatible image rollovers.
- To preload images.
- To create a slide show.
Image Rollovers
Image rollovers are commonly used to create a more interesting user experience and to help highlight navigation points. When the user hovers the mouse over an image, the source of the image is modified, so that a different image appears. When the user hovers the mouse back off the image, the original source is restored. The code below shows how to create a simple rollover.
Code Sample: DynamicImages/Demos/SimpleRollover.html
<html> <head> <title>Simple Image Rollover</title> </head> <body> <div style="text-align:center;"> <h1>Simple Image Rollover</h1> <img name="MyImage" src="Images/Banner.jpg" border="0" onmouseover="this.src = 'Images/Hulk.jpg';" onmouseout="this.src = 'Images/Banner.jpg';"> <p>Who are you calling simple?</p> </div> </body> </html>
The mouse-over event is captured with the img tag's onmouseover event handler. When this happens, the following JavaScript code is called.
this.src = 'Images/Hulk.jpg';The this object refers to the current object - whatever object (or element) the this keyword appears in. In the case above, the this object refers to the img object, which has a property called src that holds the path to the image. The code above sets the src to "Images/Hulk.jpg".
Likewise, the mouse-out event is captured with the img tag's onmouseout event handler. When this happens, the following JavaScript code is called.
this.src = 'Images/Banner.jpg';This code sets the src to "Images/Banner.jpg," which is what it originally was.
Backward Compatibility
The code above should work fine in Firefox, Internet Explorer 4.0 and later, and Netscape 6 and later. However, in earlier versions of browsers, images could not capture mouse events. The workaround is to wrap the <img> tag in an <a> tag and to put the event handlers in the <a> tag as shown below.
Code Sample: DynamicImages/Demos/SimpleRollover-backward.html
<html> <head> <title>Simple Image Rollover</title> </head> <body> <div style="text-align:center;"> <h1>Simple Image Rollover</h1> <a href="#" onmouseover="document.MyImage.src = 'Images/Hulk.jpg';" onmouseout="document.MyImage.src = 'Images/Banner.jpg';"> <img name="MyImage" src="Images/Banner.jpg" border="0"></a> <p>Who are you calling simple?</p> </div> </body> </html>
An Image Rollover Function
Image rollovers can be handled by a function as well. The two examples below show an image rollover function for modern browsers and a backward-compatible image rollover function.
Code Sample: DynamicImages/Demos/SimpleRolloverFunction.html
<html>
<head>
<title>Simple Image Rollover Function</title>
<script type="text/javascript">
function imageRollover(img, imgSrc){
img.src = imgSrc;
}
</script>
</head>
<body>
<div style="text-align:center;">
<h1>Simple Image Rollover Function</h1>
<img name="Banner" src="Images/Banner.jpg" border="0"
onmouseover="imageRollover(this, 'Images/Hulk.jpg');"
onmouseout="imageRollover(this, 'Images/Banner.jpg');">
<img name="Bruce" src="Images/Bruce.jpg" border="0"
onmouseover="imageRollover(this, 'Images/Batman.jpg');"
onmouseout="imageRollover(this, 'Images/Bruce.jpg');">
<p>Who are you calling simple?</p>
</div>
</body>
</html>
Code Sample: DynamicImages/Demos/SimpleRolloverFunction-backward.html
<html>
<head>
<title>Simple Image Rollover Function</title>
<script type="text/javascript">
function imageRollover(imgName, imgSrc){
if (document.images) {
document.images[imgName].src = imgSrc;
}
}
</script>
</head>
<body>
<div style="text-align:center;">
<h1>Simple Image Rollover Function</h1>
<a href="#"
onmouseover="imageRollover('MyImage', 'Images/Hulk.jpg');"
onmouseout="imageRollover('MyImage', 'Images/Banner.jpg');">
<img name="MyImage" src="Images/Banner.jpg" border="0"></a>
<p>Who are you calling simple?</p>
</div>
</body>
</html>
Why the check for document.images? Some early versions of browsers don't support the images array.
Preloading Images
When working with files on a local machine, image rollovers like the ones we have seen in previous examples work just fine. However, when the user first hovers over an image rollover image, the new image file has to be found and delivered to the page. If the new image is on a far-away server, this can take a few moments, causing an ugly pause in the rollover effect. This can be prevented by preloading images.
Images can be preloaded by creating an Image object with JavaScript and assigning a value to the src of that Image. A sample is shown below.
Code Sample: DynamicImages/Demos/PreloadingImages.html
<html>
<head>
<title>Preloading Images</title>
<script type="text/javascript">
var IMAGE_PATHS = [];
IMAGE_PATHS[0] = "Images/Hulk.jpg";
IMAGE_PATHS[1] = "Images/Batman.jpg";
var IMAGE_CACHE = [];
for (var i=0; i<IMAGE_PATHS.length; i++) {
IMAGE_CACHE[i] = new Image();
IMAGE_CACHE[i].src = IMAGE_PATHS[i];
}
function imageRollover(img, imgSrc) {
img.src = imgSrc;
}
</script>
</head>
<body>
<div style="text-align:center;">
<h1>Simple Image Rollover Function</h1>
<img name="Banner" src="Images/Banner.jpg" border="0"
onmouseover="imageRollover(this, 'Images/Hulk.jpg');"
onmouseout="imageRollover(this, 'Images/Banner.jpg');">
<img name="Bruce" src="Images/Bruce.jpg" border="0"
onmouseover="imageRollover(this, 'Images/Batman.jpg');"
onmouseout="imageRollover(this, 'Images/Bruce.jpg');">
<p>Who are you calling simple?</p>
</div>
</body>
</html>
Notice that the code is not in a function. It starts working immediately as follows:
- An array called IMAGE_PATHS is created to hold the paths to the images that need to be preloaded.
var IMAGE_PATHS = [];- An array element is added for each image to be be preloaded.
IMAGE_PATHS[0] = "Images/Hulk.jpg"; IMAGE_PATHS[1] = "Images/Batman.jpg";- An array called IMAGE_CACHE is created to hold the Image objects that will hold the preloaded images.
var IMAGE_CACHE = [];- A for loop is used to create an Image object and load in an image for each image path in IMAGE_PATHS.
for (var i=0; i<IMAGE_PATHS.length; i++) { IMAGE_CACHE[i]=new Image(); IMAGE_CACHE[i].src=IMAGE_PATHS[i]; }
Working with Images Conclusion
In this lesson of the JavaScript tutorial, you have learned how JavaScript can be used to manipulate HTML images to create image rollover effects and slide shows.