|
|
<img src="images/happy.gif" name="facePic">
<br>
<a href="#trick" onMouseOver="swapImage('images/happy.gif')">Happy</a>
<a href="#trick" onMouseOver="swapImage('images/sad.gif')">Sad</a>
|
The <img> tab is actually defining an image object to the web browser. It reserves space in a designated area of the web document. The src attribute is used to tell the browser the name of the image file to be displayed when the page first loads. The name attribute gives a name, in this case facePic, to the image object so we can refer to it later on when the image swapping is done.
After the image tag are two <a> tags that each use the onMouseOver event to call the swapImage function. Note that a different image file name is specified for each link. Instead of a different web page, the URL provided in the href attribute points to a section in the current document. Using the <a> tag in the manner requires that a name be assigned to a specified part of the document. This is done using the <a> tag in a slightly different fashion as shown below.
<a name="trick"><h2>Another MouseOver Trick</h2></a> |
The name attribute, in essence, creates a placeholder or book named "trick" in the header just above the place in the document containing the images being swapped. Since that part of the document is already displayed the browser doesn't have to load a separate document or move to a different part of the document. It just has to swap the images.
<script language="JavaScript">
<!--
function swapImage(picName) {
document.facePic.src = picName
}
-->
</script>
|
This short JavaScript routine takes the image file name that was passed to it and instructs the browser to substitute it for whatever image is currently displayed in the image object named facePic.