Javascript image mouse rollover

[ben2ong2]

Let's consider you have 10 images being used as icons on a web page and since you have read the previous article, you plan to have JavaScript image rollovers for each image. Writing JavaScript code inside the <A> for each image becomes very messy, not to mention, very troublesome and error prone.


A simple solution would be to collect the code into a function that can be placed between <SCRIPT> tags, inside the HTML head or in an external JavaScript (.js) file. We can then call this function with appropriate arguments from the event handlers.

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

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

//-->
</SCRIPT>
This function expects two arguments, one is the image name and the other is the image source. The function is called from onmouseover and onmouseout event handlers and the two parameters are passed to it.

<A HREF="somewhere.html"
onmouseover="roll('sub_but', 'movedown.gif')"
onmouseout="roll('sub_but', 'movetup.gif')">

<IMG SRC="moveup.gif" WIDTH="143" HEIGHT="39" BORDER="0"
ALT="Move your mouse over me" NAME="sub_but">

</A>


Building upon what we learnt here, let's see how we can change two images simultaneously.