Animate 2 Images with 1 Mouseover

[Total: 0    Average: 0/5]

This example will change the image of two pictures on the mouse over of 1 of them.

Head Code:

<SCRIPT LANGUAGE="JavaScript"> 
alt0 = new Image(); 
alt0.src = "http://www.js-examples.com/js/images/pic1.gif"; 

alt1 = new Image(); 
alt1.src = "http://www.js-examples.com/js/images/pic2.gif"; 

alt2 = new Image(); 
alt2.src = "http://www.js-examples.com/js/images/pic2.gif"; 

//These are the first button graphics 

graphic1= new Image(); 
graphic1.src = "http://www.js-examples.com/js/images/pic1.gif"; 
graphic1on = new Image(); 
graphic1on.src = "http://www.js-examples.com/js/images/pic2.gif"; 

//These are the second button graphics 

graphic2= new Image(); 
graphic2.src = "http://www.js-examples.com/js/images/pic1.gif"; 
graphic2on = new Image(); 
graphic2on.src = "http://www.js-examples.com/js/images/pic2.gif"; 

//This is the function that calls for /the change in the buttons 
function imageChange(imageID,imageName,imageID2,imageName2) { 
{ 
document.images[imageID].src = eval(imageName + ".src"); 
document.images[imageID2].src = eval(imageName2 + ".src"); 
}  } 
</SCRIPT>

Body Code:

<TABLE border="0"> 
<TR><TD> 
<A HREF="#" 
onMouseOver="imageChange('global','alt1','one','graphic1on')" 
onMouseOut="imageChange('global','alt0','one','graphic1')"> 
<IMG SRC="http://www.js-examples.com/js/images/pic1.gif" BORDER="0" NAME="one"></A> 
<BR><BR> 

<A HREF="#" 
onMouseOver="imageChange('global','alt2','two','graphic2on')" 
onMouseOut="imageChange('global','alt0','two','graphic2')"> 
<IMG SRC="http://www.js-examples.com/js/images/pic1.gif" BORDER="0" NAME="two"></A> 

<TD>  <IMG SRC="http://www.js-examples.com/js/images/pic1.gif" WIDTH="130" HEIGHT="130" NAME="global"> 
</TR></TABLE>

Times Viewed: 11

Leave a Reply

Your email address will not be published. Required fields are marked *