SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JavaScript Rollovers

    Hi Guys,

    Im new to JavaScript and I have been playing around with Rollovers.

    I was wondering if I could have 2 or more rollovers on the one page using the same functions?

    My code (works well for 1 rollover) is below:

    <script type='text/javascript'>
    function mouseOver()
    {
    document.Rollover.src='Japanese.gif';
    }
    function mouseOut()
    {
    document.Rollover.src='English.gif';
    }
    </script>
    </head>
    <body>
    <table>
    <tr><td><a href=''><img border='0' alt='Home' src='English.gif' name='Rollover' onmouseover='mouseOver()' onmouseout='mouseOut()' /></a></td>
    </tr>
    </table>

    Any help would be great.

    Kind Regards

    Peta

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Not with that code.

    What you can do is rewrite it a bit into something like this:
    Code:
    function mouseOver() {
    this.src = "Japanese.gif";
    }
    
    function mouseOut() {
    this.src = "English.gif";
    }
    "this" refers to different things depending where you use it. In this case, "this" would refer to the image you are mousing over, so you can specify it's source like that. If you wanted to use different images, you could make different images.

    You could also specify a parameter in the functions, then pass the value in through your call:
    Code:
    function mouseOver(img) {
      this.src = img;
    }
    
    function mouseOut(img) {
      this.src = img;
    }
    
    <img border='0' alt='Home' src='English.gif' name='Rollover' onmouseover='mouseOver("Japanese.gif")' onmouseout='mouseOut("English.gif")' />

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks for that, will give that a shot

    Thanks

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is another way to do it. I have attached the two images so that you can play with the script.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Two Mouseovers Same Page</title>
    <script type="text/javascript">
    <!--
    function mOver(obj,numbr)
     { obj.src=(numbr==1)? "prev.jpg" : "next.jpg";  }
    //
    function mOut(obj,numbr)
     { obj.src=(numbr==2)? "prev.jpg" :"next.jpg"; }
    //-->
    </script>
    <style type="text/css">
    <!--
    .cur { cursor:pointer; }
    -->
    </style>
    </head>
     
    <body>
     
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="200">
      <tr>
        <td>
        <img class="cur" border="0" src="next.jpg" alt="Home" onmouseover="mOver(this,1)" onmouseout="mOut(this,1)" width="32" height="77">
        </td>
        <td>
        <img class="cur" border="0" src="prev.jpg" alt="Home" onmouseover="mOver(this,2)" onmouseout="mOut(this,2)" width="32" height="77">
        </td>
      </tr>
    </table>
     
    </body>
     
    </html>
    Attached Images Attached Images

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm also a newbie looking at rollovers, and I had an example in the book I'm going thru, where the author has a rollover function setting up the mouseover and mouseout events. He showed an example where this function was called from the window.onload, and another where it was called from the body tag ...<body onload="rollover">. He didn't mention why he switched to the body onload, so I was wondering about the pros/cons of one way vs the other.

    Thanks!,
    Jeff S

  6. #6
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The window.onload=rollover; and the body onload="rollover()" do the same thing; they assign a handler fuction to the window or body elements so that function rollover() runs on mouseover. Note that the syntax is different in these two cases. The () is not used in the window.onload case as it is being assigned, not run.

    Some people like to keep as much of the script out of their HTML as they can. They will usually prefer window.onload, which is usually in the scripts stored in the head of the document. Others like to see what is going on in their page so they make the call to the handler more visible by putting it in the body tag. I prefer the second option.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it...thanks Allan

  8. #8
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You do realize this could also be done in a purely CSS fashion right?

    Using the a:link and the a:hover you could do this:

    Code CSS:
    a#home:link {
      width: 100px;
      height: 100px;
      background-image: url(someimage.jpg);
      }
     
    a#home:hover {
      background-image: url(someotherimage.jpg);  
      }

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks DC...
    yes, I believe the author mentioned it could be done in CSS; however, it's a javascript book, so he was teaching how to do it in javascript.


Bookmarks

Posting Permissions

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