JavaScript - Image Change Using Functions

The main use of function is to prevent us from writing the same code again and again because we can call the same function with a different set of parameters.

In the image roll-over script of the previous session, the code for changing the image was placed inside the event handlers. This is fine if there are one or two images. In case of several images, it is advisable to pack the code in a function that can be called repeatedly by event handlers using different parameters.

There are two important things in an image roll-over code. One is the image name and the other is the image source. Thus, we have to construct a function that accepts these two arguments and changes the image source.

function roll_over(img_name, img_src)
   {
   document[img_name].src = img_src;
   }

We can now call this function from our even handlers and pass it the two arguments.

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>

1. You've seen how we can change an image on mouseover. How do you think, two images can be changed with a single mouse over?