|
|
<a href="happy.html" onMouseOver="turnOn('happy')"
onMouseOut="turnOff('happy')">
<img src="images/happyoff.gif" name="happy"></a><br>
<a href="sad.html" onMouseOver="turnOn('sad')"
onMouseOut="turnOff('sad')">
<img src="images/sadoff.gif" name="sad"></a><br>
|
The <a> tags use two different JavaScript functions. The onMouseOver event is triggered whenever the mouse pointer hovers over a link on the screen. The turnOn function is performed when the mouse is over the link and the text enclosed in single quotes is passed to the function. When the mouse move away from the link, the onMouoseOut event is triggered and the turnOff function is performed receiving the text enclosed in single quotes. These will be explained below.
An <img> tag is used to display the image that will serve as the clickable link on the screen. Note that the image src attribute is initially set to the image used when the mouse is not over the link. Also worth noting is the use of the name attribute with the <img> tag. A name is usually not assigned to images, but it's required here so the JavaScript routines that perform the swapping will know which image to act on.
The names given to the respective images is the same as the text passed to the JavaScript functions that perform the actual image swapping.
<script language="JavaScript">
<!--
/*******************************************************************
The following group of statements defines all the images used for
the onMouseOver and onMouseOff routines Two statements are needed
for each set of images. The first tells the browser that space is
to be reserved for a new image. The second specifies the SRC
attribute of the image.
*********************************************************************/
if (document.images) {
happyon = new Image()
happyon.src = "images/happyon.gif"
happyoff = new Image()
happyoff.src = "images/happyoff.gif"
sadon = new Image()
sadon.src = "images/sadon.gif"
sadoff = new Image()
sadoff.src = "images/sadoff.gif"
}
/********************************************************************
The following routines swap between the 'on' and 'off' images by
changing the SRC attribute associated with the <img> tags.
*********************************************************************/
function turnOn(imgName) {
if (document.images) {
imgOn = eval(imgName + 'on.src');
document [imgName].src = imgOn
}
}
function turnOff(imgName) {
if (document.images) {
imgOff = eval(imgName + 'off.src');
document [imgName].src = imgOff
}
}
-->
</script>
|
The first statement in the function (that is, the one immediately after the function statement) is used to determine if the browser supports images. If it does, the remaining statements are performed. The following statement defines a new image object for the browser, in this example one named happyon. The next statement assigns the image file to be associated with the src attribute of that image object. The happyon image will be used by the browser when the mouse is rolled over the link named happy in the HTML code presented earlier.
This pair of statements is followed by three more similar pairs of statements that define images to be used when the mouse is over the link named sad that was defined in the HTML. Happyoff and sadoff define the images to be displayed when the mouse is not hovering over the link.
The turnOn function received the text string passed to it when the mouse is rolled over the HTML link. This text string is referred in the function by the name imgName. The next two statements do the actual swapping by changing the src attribute of the image name passed to the function.
The turnOff function performs the same kind of work as turnOn except it's called when the mouse is rolled away from the link.