+ Reply to Thread
Results 1 to 5 of 5

Thread: JavaScript:Tutorial, MouseOver Image Change

  1. #1
    TcM
    TcM is offline
    Code Warrior TcM is a name known to all TcM is a name known to all TcM is a name known to all TcM is a name known to all TcM is a name known to all TcM is a name known to all TcM's Avatar
    Join Date
    Aug 2006
    Posts
    11,461
    Blog Entries
    6

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

    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!!
    Attached Files
    Last edited by TcM; 12-03-2006 at 12:30 PM.

  2. #2
    Newbie sahar88 is an unknown quantity at this point
    Join Date
    Feb 2007
    Posts
    5
    it's cool ... thank you...

  3. #3
    Newbie cvirus is an unknown quantity at this point
    Join Date
    Oct 2007
    Posts
    2

    Thumbs up Very Good

    Very good tutorial, nice for a web site.

  4. #4
    Newbie cryptokyle is an unknown quantity at this point cryptokyle's Avatar
    Join Date
    May 2009
    Location
    Singapore
    Posts
    11

    Re: JavaScript:Tutorial, MouseOver Image Change

    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.

  5. #5
    Administrator Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan's Avatar
    Join Date
    Nov 2005
    Location
    Hendersonville, NC
    Posts
    24,556
    Blog Entries
    97

    Re: JavaScript:Tutorial, MouseOver Image Change

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

+ Reply to Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Similar Threads

  1. Resize Images And Maintain Original Sharpness
    By AfTriX in forum Photoshop Tutorials
    Replies: 11
    Last Post: 03-10-2010, 05:33 PM
  2. How to change the hostname in Windows XP
    By navghost in forum General Programming
    Replies: 5
    Last Post: 06-03-2009, 11:22 PM
  3. How to make image straight - Photoshop
    By ahsan16 in forum Photoshop Tutorials
    Replies: 56
    Last Post: 07-30-2008, 03:11 PM
  4. Using change management
    By Cosmet in forum General Programming
    Replies: 2
    Last Post: 10-30-2006, 06:16 PM
  5. Change design to make more $
    By Montecarlo in forum Website Design
    Replies: 11
    Last Post: 07-13-2006, 12:05 PM

Bookmarks

Bookmarks

     
        Algorithms and Data Structures

        Java tutorials

        Algorithms Forum

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts