WebDevelopersNotes logo

home-icon Home / JavaScript / Changing two images on mouse over using JavaScript

Changing two images on mouse over using JavaScript

Changing two images on mouse over using JavaScript

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.

Click here to see how this works!

<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;


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" />

<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.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links


How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]


The Arial font was developed in 1982 by a ten member team headed by Robin Nicholas and Patricia Saunders at Monotype Typography. The typeface was designed so that a document created with Helvetica would be displayed and printed correctly without having to pay for a license. Arial was first used on the IBM 240-DPI 3800-3 laserxerographic printer where it replaced Helvetica. Only in 1992, Microsoft chose the typeface to be one of their four core TrueType fonts for Windows 3.1. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy