JavaScript:Tutorial, MouseOver Image Change

**TcM** · 12-03-2006, 10:20 AM

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

Code:

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

Code:

<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

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

A Preview:-

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

**sahar88** · 02-18-2007, 06:56 PM

it's cool ... thank you...

**cvirus** · 10-30-2007, 11:51 AM

Very good tutorial, nice for a web site.

**cryptokyle** · 06-05-2009, 12:36 AM

Code:

if (document.images)
 {
     img1on= new Image(100,100);
     img1on.src="img2.jpg";  

     img1off= new Image(100,100);
     img1off.src="img1.jpg";
 }

i need help with understanding this portion of the code.

Jordan · 06-06-2009, 06:49 AM

It is creating a new image that is 100x100 (size) and the src is img2.jpg. Similar to saying:

HTML Code:

<img src="img2.jpg" width="100" height="100">

Thread: JavaScript:Tutorial, MouseOver Image Change

LinkBack

Thread Tools

Search Thread

Display

JavaScript:Tutorial, MouseOver Image Change

Very Good

Re: JavaScript:Tutorial, MouseOver Image Change

Re: JavaScript:Tutorial, MouseOver Image Change

Thread Information

Users Browsing this Thread

Similar Threads

Using Listbox to change image in Picturebox!

change image with dropdown

Mouseover to start javascript slide show

Change image url with dropdown selection

Change image help

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions