A Simple Image Rollover
In this example, you are going to see how to replace one image with another one when the user rolls over the image with her mouse. These kinds of images are commonly used in navigation items to indicate that a user can click on them.
While they require that two images be loaded rather than just one in order for the rollover to work, they can be quite effective, and if you are careful with your choice of images (making sure that the image files are not too large), then the extra overhead of loading another image for each rollover will not be a problem.
In this example you are going to see two simple images, both saying “click here.” When the page loads the image will be in green with white writing, but as soon as the user hovers over the image with his mouse it will turn red with white writing.
1. Create the skeleton of a Transitional XHTML document:While they require that two images be loaded rather than just one in order for the rollover to work, they can be quite effective, and if you are careful with your choice of images (making sure that the image files are not too large), then the extra overhead of loading another image for each rollover will not be a problem.
In this example you are going to see two simple images, both saying “click here.” When the page loads the image will be in green with white writing, but as soon as the user hovers over the image with his mouse it will turn red with white writing.
<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en">
<head>
<title>Image Rollover</title>
</head>
<body>
</body>
</html>
2. Add the following link and image to the body of your document:
<p>Hover over the image with your mouse to see the simple rollover effect.
<br/>
<a href=""
<img src="images/click_green.gif" width="100" height="50" border="0"
alt="Example button" name="button" />
</a>
</p>
3. Now add the following onmouseover and onmouseout event handler attributes with the
specified values:
<a href=""
onmouseover="document.images.button.src='images/click_red.gif';"
onmouseout="document.images.button.src='images/click_green.gif'">
4. Save this example as sciencezen.html and open it in your browser. Then roll your mouse over the image (without clicking it).
There you go, you have your simple image rollover.
Happy Rea
0 comments:
Post a Comment