JavaScript:Tutorial, MouseOver Image Change

**TcM** · #1 (**permalink**) 12-03-2006, 12:20 PM

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 · #2 (**permalink**) 02-18-2007, 08:56 PM

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

cvirus · #3 (**permalink**) 10-30-2007, 01:51 PM

Very good tutorial, nice for a web site.

cryptokyle · #4 (**permalink**) 06-05-2009, 02: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** · #5 (**permalink**) 06-06-2009, 08: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 Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to change the hostname in Windows XP	navghost	General Programming	5	06-03-2009 11:22 PM
How to make image straight - Photoshop	ahsan16	Photoshop Tutorials	56	07-30-2008 03:11 PM
Resize Images And Maintain Original Sharpness	AfTriX	Photoshop Tutorials	7	04-20-2007 09:55 AM
Using change management	Cosmet	General Programming	2	10-30-2006 06:16 PM
Change design to make more $	Montecarlo	Website Design	11	07-13-2006 12:05 PM

CodeCall

Sponsors

Freelance Jobs

Compare Hosting Plans

CodeCall Goal

Ads

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)