Image Mouse on and out

Image Mouse on and out : Mouse Event : Event JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Event » Mouse Event »

Image Mouse on and out



<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
 // Preload original Images
 var pic1_init= new Image();
 pic1_init.src="http://www.navioo.com/style/logo.png";
 var pic2_init= new Image();
 pic2_init.src="http://www.navioo.com/style/logo.png";
 var pic3_init= new Image();
 pic3_init.src="http://www.navioo.com/style/logo.png";
 var pic4_init= new Image();
 pic4_init.src="http://www.navioo.com/style/logo.png";

 // Preload images for mouseover
 var pic1_new= new Image();
 pic1_new.src="http://www.navioo.com/style/logoRed.png"; 
 var pic2_new= new Image();
 pic2_new.src="http://www.navioo.com/style/logoRed.png";
 var pic3_new= new Image();
 pic3_new.src="http://www.navioo.com/style/logoRed.png";
 var pic4_new= new Image();
 pic4_new.src="http://www.navioo.com/style/logoRed.png";
}

function change_it(the_name)
{
 if (document.images)
 {
  document.images[the_name].src= eval(the_name+"_new.src");
 }
}

function change_back(the_name)
{
 if (document.images)
 {
  document.images[the_name].src= eval(the_name+"_init.src");
 }
}
//-->
</SCRIPT>

</HEAD>

<BODY>

<A HREF="#" onMouseOver="change_it('pic1')" onMouseOut="change_back('pic1')"><IMG SRC="http://www.navioo.com/style/logo.png" name="pic1" id="pic1" border="0"></A>
<P>
<A HREF="#" onMouseOver="change_it('pic2')" onMouseOut="change_back('pic2')"><IMG SRC="http://www.navioo.com/style/logo.png" name="pic2" id="pic2" border="0"></A>
<P>
<A HREF="#" onMouseOver="change_it('pic3')" onMouseOut="change_back('pic3')"><IMG SRC="http://www.navioo.com/style/logo.png" name="pic3" id="pic3" border="0"></A>
<P>
<A HREF="#" onMouseOver="change_it('pic4')" onMouseOut="change_back('pic4')"><IMG SRC="http://www.navioo.com/style/logo.png" name="pic4" id="pic4" border="0"></A>

</BODY>

</HTML>