|
|
Mouseover image rotations are probably the most common dynamic effect on the Web. Due to its simplicity, there are many different ways to implement this effect. For our Center Park Web site project you'll simply use the built-in mouse event handler for the IMG tag, but I will present several other ways in which the same effect could be accomplished.
I wrote the example below, which uses simple text links, in order to demonstrate the significant improvements that occur just by adding this simple effect. We'll compare it with the mouseover links later on. Figure 20.1 illustrates this very basic Web page.
<html>
<head>
<base target="main">
</head>
<body>
<font color="red" size="4"><b>
Center Park<br>
</b></font>
<table width="100%">
<tr><td>
<a href="Main.html" target="main">
Home
</a>
</td></tr>
<tr><td>
<a href="LogIn.html" target="main">
Login
</a>
</td></tr>
<tr><td>
<a href="Store.html" target="main">
Store
</a>
</td></tr>
<tr><td>
<a href="Customize.html" target="main">
Customize
</a>
</td></tr>
</table>
</body>
</html>
Notice that this example is completely devoid of any JavaScript whatsoever. I placed this Web page in the left frame of the following frames page:
<html>
<head>
<title>Center Park Home Page</title>
</head>
<frameset cols="150,*">
<frame name="contents" target="main"
src="MenuBar.html" scrolling="no" noresize>
<frame name="main" src="Main.html" scrolling="auto" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
As you can see in Figure 20.1, this Web page is very plain indeed. Anybody with basic knowledge of HTML could design and build this page in about an hour. There are literally millions of Web sites that look nearly identical to this one. In other words, they're boring.
One very easy way to spice things up a bit is to replace the text links with image links, as follows. Note that in Figure 20.2, the text links are now graphic links.
<html>
<head>
<base target="main">
</head>
<body>
<font color="red" size="4"><b>
Center Park<br>
</b></font>
<table width="100%">
<tr><td>
<a href="Main.html">
<img border="0" src="home1.bmp">
</a>
</td></tr>
<tr><td>
<a href="LogIn.html" target="main">
<img border="0" src="login1.bmp">
</a>
</td></tr>
<tr><td>
<a href="Store.html" target="main">
<img border="0" src="store1.bmp">
</a>
</td></tr>
<tr><td>
<a href="Customize.html" target="main">
<img border="0" src="customize1.bmp">
</a>
</td></tr>
</table>
</body>
</html>
Although this site is significantly more interesting, it is still not flashy enough to make it stand out in any way. What I really need to take my site to the head of the pack is some dynamism. I'd like to make the image change slightly when my mouse hovers over it. To do that, I will use the onMouseOver and onMouseOut image event handlers. When the mouse cursor is moved over the image, I will replace the image with a slightly different one; and when the cursor is moved off the image, I will return it to its original state. Here is a template for doing just that:
<img src="image1.bmp" border="0"
onMouseOver="JavaScript: this.src='image2.bmp';"
onMouseOut="JavaScript: this.src='image1.bmp';">
If I apply this template to the images in the Center Park menu bar, it would look something like Figure 20.3. Note that in this figure, the mouse cursor is hovering over the Log In button, causing it (via the OnMouseOver image event) to change color and appear highlighted).
Here is the complete source that makes it look that way:
<html>
<head>
<base target="main">
</head>
<body>
<font color="red" size="4"><b>
Center Park<br>
</b></font>
<table width="100%">
<tr><td>
<a href="Main.html" target="main">
<img border="0" src="home1.bmp"
onMouseOver="JavaScript: this.src='home2.bmp';"
onMouseOut="JavaScript: this.src='home1.bmp';">
</a>
</td></tr>
<tr><td>
<a href="LogIn.html" target="main">
<img border="0" src="login1.bmp"
onMouseOver="JavaScript: this.src='login2.bmp';"
onMouseOut="JavaScript: this.src='login1.bmp';">
</a>
</td></tr>
<tr><td>
<a href="Store.html" target="main">
<img border="0" src="store1.bmp"
onMouseOver="JavaScript: this.src='store2.bmp';"
onMouseOut="JavaScript: this.src='store1.bmp';">
</a>
</td></tr>
<tr><td>
<a href="Customize.html" target="main">
<img border="0" src="customize1.bmp"
onMouseOver="JavaScript: this.src='customize2.bmp';"
onMouseOut="JavaScript: this.src='customize1.bmp';">
</a>
</td></tr>
</table>
</body>
</html>
At long last I have a site that is as aesthetically pleasing as it is useful. This, of course, is not the only way to create mouseover effects. It might not even be the best way, but it is the simplest. If you have a very large number of buttons or if you wanted to incorporate the onMouseDown event with yet another image, you would soon realize that doing so requires a very large amount of code. The more code there is, the longer the download time will be, so I will present one alternative that you may find more useful than hard-coding each image.
I stated earlier that every good bit of functionality requires an equally good function, and mouseover events are no exception. What you need is a function that can handle each image change for every image, regardless of the event that caused it. This may seem like daunting requirements, but with the aid of the document object model (DOM), it's really not difficult at all. First I will present a working example and then I will explain it in detail.
<html>
<head>
<base target="main">
<script language="JavaScript">
<!--
function change( image, event )
{
image.src = image.name + event + ".bmp";
}
// -->
</script>
</head>
<body>
<font color="red" size="4"><b>
Center Park<br>
</b></font>
<table width="100%">
<tr><td>
<a href="Main.html" target="main">
<img border="0" src="home1.bmp" name="home"
onMouseDown="JavaScript: change( this, 3 );"
onMouseOver="JavaScript: change( this, 2 );"
onMouseOut="JavaScript: change( this, 1 );">
</a>
</td></tr>
<tr><td>
<a href="LogIn.html" target="main">
<img border="0" src="login1.bmp" name="login"
onMouseDown="JavaScript: change( this, 3 );"
onMouseOver="JavaScript: change( this, 2 );"
onMouseOut="JavaScript: change( this, 1 );">
</a>
</td></tr>
<tr><td>
<a href="Store.html" target="main">
<img border="0" src="store1.bmp" name="store"
onMouseDown="JavaScript: change( this, 3 );"
onMouseOver="JavaScript: change( this, 2 );"
onMouseOut="JavaScript: change( this, 1 );">
</a>
</td></tr>
<tr><td>
<a href="Customize.html" target="main">
<img border="0" src="customize1.bmp" name="customize"
onMouseDown="JavaScript: change( this, 3 );"
onMouseOver="JavaScript: change( this, 2 );"
onMouseOut="JavaScript: change( this, 1 );">
</a>
</td></tr>
</table>
</body>
</html>
All of the image events are handled by a single function, change(),
function change( image, event )
{
image.src = image.name + event + ".bmp";
}
which takes two parameters. The first parameter is a pointer to the image that created the event. The second parameter is an integer that specifies the event type. I have chosen the value 3 for the onMouseDown event, the value 2 for the onMouseOver event, and the value 1 for the onMouseOut event. For each button, you will need to create a separate image for each event type. One thing you may have noticed is that I added a name attribute to each image element. This value is used in the change() function to make sure the correct image is displayed on the element. The format required by the image elements in order to use this function is as follows:
<img src="image1.bmp" name="image" border="0"
onMouseDown="JavaScript: change( this, 3 );"
onMouseOver="JavaScript: change( this, 2 );"
onMouseOut="JavaScript: change( this, 1 );">
This method is somewhat easier to read than the previous one, and it will decrease download time with a large number of images. Both techniques are identical in function, however. It is completely up to you as to which one you use.
|
|