Rollover images are a very useful effect on webpages. They make easier for you to point out site features to your users. First you need to have the images that you want to use. On this example we are going to use the following images. As you can see, commonly we use two images of the same size, although this is not necessary.
The following example illustrates the use of rollover images.
|
<html>
<head>
<script>
<!-- function rollover(image) {
document.image1.src=image;
}
// -->
</script>
</head>
<body>
<img src="roll1.gif"
alt="Move your mouse over here!" name="image1" OnMouseOver="rollover('roll2.gif')"
OnMouseOut="rollover('roll1.gif')">
</body>
</html> |
Lets discuss the code above. The function rollover is the one that makes the job of changing the image. It accepts a parameter (image) which contains the source of the image to show. document.image1.src establishes the source of the image.
function rollover(image) {
document.image1.src=image;
} |
On the img tag we have placed two events, OnMouseOver and OnMouseOut which calls the rollover function. roll2.gif and roll1.gif are the sources of our images. Notice that we have to call both events because if we only call OnMouseOver then the image will not return to its original state after the mouse leaves.
