Change link image in mouse in and mouse out

Change link image in mouse in and mouse out : img : HTML Tags JAVASCRIPT TUTORIALS

JAVASCRIPT TUTORIALS » HTML Tags » img »

Change link image in mouse in and mouse out



<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
if (document.images) {
   var pic1_init= new Image();
   pic1_init.src="1.gif";
   var pic2_init= new Image();
   pic2_init.src="2.gif";
   var pic3_init= new Image();
   pic3_init.src="3.gif";
   var pic4_init= new Image();
   pic4_init.src="4.gif";

   // Preload images for mouseover
   var pic1_new= new Image();
   pic1_new.src="5.gif";
   var pic2_new= new Image();
   pic2_new.src="6.gif";
   var pic3_new= new Image();
   pic3_new.src="7.gif";
   var pic4_new= new Image();
   pic4_new.src="8.gif";

   alert("init");
}

function change_it(the_name) {
   alert("in change it");
   if (document.images) {
      document.images[the_name].src= eval(the_name+".src");
      alert("changed to:"+document.images[the_name].src);
   }
}

function change_back(the_name) {
   alert("in change back");
   if (document.images) {
      document.images[the_name].src= eval(the_name+".src");
      alert("change back to:"+document.images[the_name].src);
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onMouseOver="change_it('1')" onMouseOut="change_back('8')"><IMG SRC="1.gif" name="1" id="1"></A>
<P>
<A HREF="#" onMouseOver="change_it('2')" onMouseOut="change_back('7')"><IMG SRC="2.gif" name="2" id="2"></A>
<P>
<A HREF="#" onMouseOver="change_it('3')" onMouseOut="change_back('6')"><IMG SRC="3.gif" name="3" id="3"></A>
<P>
<A HREF="#" onMouseOver="change_it('4')" onMouseOut="change_back('5')"><IMG SRC="4.gif" name="4" id="4"></A>
</BODY>
</HTML>