| Previous: What Is Dynamic HTML? | Next: CSS Positioning and Layers |
One of the more popular uses of DHTML is to create mouseover scripts that enable you to change either an image or a text property when you place the mouse pointer over it. These scripts are actually fairly easy to create, with the JavaScript and CSS knowledge you already have.
Although CSS-based mouseovers (using the pseudo-classes such as a.hover) work in Netscape 4, these DOM-based mouseovers work only in Internet Explorer 4 and above, and in Netscape 6 and above. If you use the mouseovers to communicate important information, you may need to offer another page for users of earlier browsers.
To begin, let's look at a very basic mouseover, which simply causes an image to change when you place the mouse over it. This might not sound like much, but it can actually be quite handy. Not only is it a visual cue to show users that the mouse is hovering over the image, but it can also be used to display two images in the space of one image—for real estate or classified ad pages, for instance.
Listing 1 shows the code for the image mouseover.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mouseover Image Demo</title>
</head>
<script type="text/javascript">
<!--
function changeImage () {
document.images.myImage.src="second.jpg";
}
function changeBack () {
document.images.myImage.src="first.jpg";
}
// -->
</script>
<body>
<p>Mouse over the image to change it:</p>
<img src="first.jpg" id="myImage" onmouseover="changeImage()" onmouseout="changeBack()" />
</body>
</html>
When the user places the mouse pointer over the image, it changes from the first.jpg image to the second.jpg image. When the user removes the mouse pointer from the image, the first.jpg image returns. This is shown in Figure 1.
Figure 1 On the left, the image before mousing over; on the right, the image is being pointed to with the mouse pointer, so it changes.
NOTE
For this to work, particularly for cross-browser compatibility, your images need to be the exact same size, down to the pixel. If they're even a little off, you'll get odd results. IE may reformat the page, which looks bad, while earlier Netscape versions may have trouble rendering the images at all.
As you can see, this is a fairly simple script that relies on something you've already seen, the images object that's part of the document object:
){kind=link}
function changeImage () {
document.images.image01.src="second.jpg";
}
In this case, the image was given an object name via the id="image01" attribute that was added to the <img> element, which makes it possible to refer to the image by name in this object reference. This is convenient, but not entirely necessary. The images object is an array, which can be accessed using an index. So, for instance, you could have used
function changeImage () {
document.images[0].src="second.jpg";
}
This gives you the same result, because image01 and images[0] refer to the same image—in this case, it's the first and only image on the page.
Another step up in the "Wow" department is the remote image mouseover. This simply means that you can encourage your users to mouse over an element—a hyperlink, for example—and that changes an image on another part of the page.
For this example, a table will be used for layout. On the left side of the table are links that can receive the mouseovers; on the right side is the image. If the user decides to click a link, the full page for that link will load.
NOTE
The way this example is done, it will still work well in earlier versions of Netscape and Internet Explorer (at least, those that support tables). While the image won't swap in some versions, the user is still free to click the hypertext link to see more about each item (in this case, a house). Presumably, they'd be able to see more traditional images on those pages.
Listing 2 shows the code for this page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Image Demo</title>
</head>
<style>
a, h1 {font-family: Arial, Helvetica}
</style>
<script type="text/javascript">
<!--
function changeImage (indexNum) {
if (indexNum == 1) document.images.image01.src="1980main.jpg";
if (indexNum == 2) document.images.image01.src="1730maple.jpg";
}
function changeBack () {
document.images.image01.src="logo.jpg";
}
// -->
</script>
<body>
<h1>Featured Listings</h1>
<table border="0" width="600" cellpadding="10">
<tr>
<td width="380">
<p><a href="1980main.html" onmouseover="changeImage(1)" onmouseout="changeBack()">1980 Main Street</a></p>
<p>This beautiful 3/2 farmhouse is right in the heart of Old Towne, taking you out of
the suburbs and back to within walking distance of not only the drug store, but the
drug store's soda fountain! Put life back the way it's supposed to be, at $125,000.</p>
<p>
<a href="1730maple.html" onmouseover="changeImage(2)" onmouseout="changeBack()">1730 Maple Avenue</a></p>
<p>
Not only does this neighborhood have good schools and good shade trees, it's got great
sidewalks. Get out and meet your new neighbors, or strap on that helmet and get back on
that bicycle you haven't ridden in years. The bike path in front of this property takes
you right along Creekside Drive and into the county park! This 2/2 cottage has two porches
and a two-car garage with studio apartment. Only $135,000.
</p>
</td>
<td width="200">
<div align="center">
<img src="logo.jpg" id="image01">
</td>
</tr>
</table>
</body>
</html>
You'll notice that this script is actually pretty similar to Listing 1—particularly the script functions, which perform the same basic image assignment using an object reference. The only difference up top is the series of if statements, which are used to determine what image should be loaded depending on the hyperlink that receives the mouseover event. Each individual hyperlink is designed to send its own index, so you know which image to load. Figure 2 shows this script in action.
Figure 2 On the left, the page before a mouseover event; on the right, the pointer is over a hypertext link and the image has changed.
Before we move on to some other DHTML topics, we should cover the notion of preloading images. When you preload an image for mouseover use, that image is stored in the browser's cache. That means the browser won't have to retrieve the image when the mouseover occurs, which can result in delays that confuse the user. To get around that, you need to tweak the approach a little bit, as shown in Listing 3.
){kind=link}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Preload Image Mouseover Demo</title>
</head>
<script type="text/javascript">
<!--
function loadImages () {
image01 = new Image();
image01.src = "first.jpg";
image02 = new Image();
image02.src = "second.jpg";
}
function changeImage () {
document.images.myImage.src=image02.src;
}
function changeBack () {
document.images.myImage.src=image01.src;
}
// -->
</script>
<body>
<script type="text/javascript">
<!--
loadImages();
// -->
</script>
<p>Mouse over the image to change it:</p>
<img src="first.jpg" id="myImage" onmouseover="changeImage()" onmouseout="changeBack()" />
</body>
</html>
The major difference in this script is the new loadImages() function, which is called from the main body of the script so that the images load into the browser's cache. That's done by creating a new Image object (using the new Image() command) and assigning it a particular image file as a source. (The Image object is a preset object that's built into JavaScript implementations.) Now, these image objects can be used in the changeImage() and changeBack() functions, with the added advantage that the images are already loaded when called—the user won't have to wait to see the images change.
| Previous: What Is Dynamic HTML? | Next: CSS Positioning and Layers |