Changing two images on mouse over using JavaScript

Sponsored Links

To change two images simultaneously, we extend the roll() function we made in the previous article, so that it takes four arguments instead of two. The first two specify the name and source for image1 while the other two for image2.


Image for JavaScript mouseoverAnother image for mouseover


<script type="text/javascript">
<!--

function roll(img_name1, img_src1, img_name2, img_src2)
   {
   document[img_name1].src = img_src1;
   document[img_name2].src = img_src2;
   }

//-->
</script>

The JavaScript function above can be placed in the HTML head or in an external JavaScript file (.js) so that it loads right at the beginning of the document.
This function expects four arguments. The function is called from onmouseover and onmouseout event handlers and the four parameters are passed to it.


<a href="somewhere.html" 
onmouseover="roll('sub1', 'movedown.gif', 'sub2', 'an1.gif')"
onmouseout="roll('sub1', 'moveup.gif', 'sub2', 'an2.gif')">

<img src="moveup.gif" name="sub1" width="143" 
height="39" border="0" />
</a>

<img src="an2.gif" name="sub2" width="143" height="39" />

Finally we'll get to know how to preload images so that the rollovers are smooth.


Click this button if you liked the article!

Page contents: Changing two images simultaneously on mouseover using javascript.

AddThis Social Bookmark Button

HTML & JavaScript Tips


Vote and Share