JavaScript:Tutorial, MouseOver Image Change

Introduction:-
In this tutorial I will show you how to change the image when the user puts the cursor over an image and then change it back when the user puts the cursor away from the image.

Solution:-
Make These Two Functions Between The <head> tags:-


<SCRIPT language="JavaScript">


if (document.images)

 {

     img1on= new Image(100,100);

     img1on.src="img2.jpg";  


     img1off= new Image(100,100);

     img1off.src="img1.jpg";

 }


function change(imgName)

 {

   if (document.images)

      {

         imgOn=eval(imgName + "on.src");

         document[imgName].src= imgOn;

      }

 }


function changeback(imgName)

 {

   if (document.images)

      {

        imgOff=eval(imgName + "off.src");

        document[imgName].src= imgOff;

      }

 }


</SCRIPT>

And Make This code between the <body> Tags:-


<A onMouseover="change('img1')" onMouseout="changeback('img1')">

<IMG SRC="img1.jpg" name="img1" width="100" height="100"></A>

Save your work and add these 2 images into your directory to see the effect ;)
Posted Image

Explanation:-
You think it is needed? I think its self explanatory. But if you have any problems.. just ask ;)

A Preview:-
Posted Image

Conclusion:-
As Always Feedback is welcome and the full source is attached!!

Attached Files

Change Image.zip 2.61K 616 downloads

#1
TcM

Posted 03 December 2006 - 10:20 AM

Attached Files

#2
sahar88

Posted 18 February 2007 - 06:56 PM

#3
cvirus

Posted 30 October 2007 - 10:51 AM

#4
cryptokyle

Posted 04 June 2009 - 11:36 PM

#5
Guest_Jordan_*

Posted 06 June 2009 - 05:49 AM

JavaScript:Tutorial, MouseOver Image Change

#1 TcM Posted 03 December 2006 - 10:20 AM

Attached Files

#2 sahar88 Posted 18 February 2007 - 06:56 PM

#3 cvirus Posted 30 October 2007 - 10:51 AM

#4 cryptokyle Posted 04 June 2009 - 11:36 PM

#5 Guest_Jordan_* Posted 06 June 2009 - 05:49 AM

Sign In

#1
TcM

Posted 03 December 2006 - 10:20 AM

#2
sahar88

Posted 18 February 2007 - 06:56 PM

#3
cvirus

Posted 30 October 2007 - 10:51 AM

#4
cryptokyle

Posted 04 June 2009 - 11:36 PM

#5
Guest_Jordan_*

Posted 06 June 2009 - 05:49 AM