|
|
The Mouseover Image Change
Here's the script for this mouseover
event: <script language="JavaScript">
function move_out(img_name,img_src){
<body>
If you cut and paste the code, make sure you place the portion between the two
SCRIPT tags between the two Head tags. The code below consists of an HTML
form which calls a script to produce a window with the script specified within the
form. The form.txt1.value is the variable containing the text in the form, and the
MsgBox function produces the message box. The javascript uses the alert Javascript
function to produce the alert window.
function move_in(img_name,img_src){
document[img_name].src=img_src;
}
document[img_name].src=img_src;
}</script>
<A HREF="introduction.html" onmouseover="move_in('button','over.jpg')"
onmouseout="move_out('button','normal.jpg')">
<IMG NAME="button" SRC="normal.jpg"
ALT="Image"></A></CENTER>
</body>
The image is changed by the onmouseover and onmoouseout event handlers which call the
move_in and move_out functions respectively. The onmouseover event handler passes the
name of the image which will appear when the mouse is over the image area to the
move_in function. The move_in function changes the image accordingly. The move_out
function moves in a similiar way. Both make use of the the img_name also. This
specifies the name of the image in the document which will be changed in the
document[img_name].scr=img_src line. If you want to have multiple images which can
be changed by this function, be sure to give image a different name in the
NAME parameter
of the IMG tag.
