Change link image in mouse in and mouse out : img « HTML Tags « JavaScript Tutorial






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








21.9.img
21.9.1.Image
21.9.2.Image.border
21.9.3.Image.complete
21.9.4.Image.height
21.9.5.Image.hspace
21.9.6.Image.lowsrc
21.9.7.Image.name
21.9.8.Image.src
21.9.9.Image.vspace
21.9.10.Image.width
21.9.11.Change link image in mouse in and mouse out
21.9.12.Change image align
21.9.13.Change image title
21.9.14.Image substitute
21.9.15.Image load onerror event (IE)
21.9.16.Add onerror handler to image element within document element array (IE)
21.9.17.Replace an Image under mouse event (onMouseOver, onMouseOut)
21.9.18.Slide Show
21.9.19.Change vspace for image