Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

JavaScript:Tutorial, MouseOver Image Change


  • Please log in to reply
8 replies to this topic

#1 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7563 posts

Posted 03 December 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:-

<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

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


  • 0

#2 sahar88

sahar88

    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 18 February 2007 - 06:56 PM

it's cool ... thank you...
  • 0

#3 cvirus

cvirus

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 30 October 2007 - 10:51 AM

Very good tutorial, nice for a web site.
  • 0

#4 cryptokyle

cryptokyle

    CC Newcomer

  • Just Joined
  • PipPip
  • 11 posts

Posted 04 June 2009 - 11:36 PM

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.:o
  • 0

#5 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 06 June 2009 - 05:49 AM

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

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

  • 0

#6 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts
  • Programming Language:C, C++, C#, JavaScript, PL/SQL, Delphi/Object Pascal, Visual Basic .NET, Pascal, Transact-SQL, Bash

Posted 26 November 2013 - 08:18 AM

I think it's cool you did a tutorial, but I think this is the wrong way to go about a mousover effect.  I think it should be done in CSS, not javascript.


  • 1
My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth

#7 xham

xham

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 08 May 2014 - 07:15 AM

Yes I prefer css option its cleaner for search engines.


  • 0

#8 cyberoot

cyberoot

    CC Newcomer

  • Member
  • PipPip
  • 11 posts
  • Programming Language:PHP, JavaScript
  • Learning:Python, Perl

Posted 03 August 2014 - 09:08 PM

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

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

Good Explain :D


  • 0

#9 destineddesign

destineddesign

    CC Lurker

  • New Member
  • Pip
  • 5 posts
  • Location:california

Posted 18 September 2014 - 11:01 PM

Thank you very much, exactly what I need for my work :thumbup1:


  • 0