Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member mikeycorn's Avatar
    Join Date
    Mar 2003
    Posts
    272
    Member #
    891
    I took a snippet of javascript where a single image switched with the mouse over and tried to expand it to four separate images. Unfortunately, mousing over any of the four images only works to switch the last image . . .

    Code:
    <script type="text/javascript">
    function mouseOver()
    {
    document.getElementById("home").src="images/ur2b.jpg"
    }
    function mouseOut()
    {
    document.getElementById("home").src="images/ur2s.jpg"
    }
    function mouseOver()
    {
    document.getElementById("products").src="images/ur3b.jpg"
    }
    function mouseOut()
    {
    document.getElementById("products").src="images/ur3s.jpg"
    }
    function mouseOver()
    {
    document.getElementById("about").src="images/ur4b.jpg"
    }
    function mouseOut()
    {
    document.getElementById("about").src="images/ur4s.jpg"
    }
    function mouseOver()
    {
    document.getElementById("contact").src="images/ur5b.jpg"
    }
    function mouseOut()
    {
    document.getElementById("contact").src="images/ur5s.jpg"
    }
    </script>
    Code:
        <tr>
          <td height="29"><a href="index.html" onmouseover="mouseOver()" onmouseout="mouseOut()"><img border="0" width="335" height="29" alt="Home" src="images/ur2s.jpg" id="home" /></a></td>
        </tr>
        <tr>
          <td height="36"><a href="products_01.html" onmouseover="mouseOver()" onmouseout="mouseOut()"><img border="0" width="335" height="36" alt="Products" src="images/ur3s.jpg" id="products" /></a></td>
        </tr>
        <tr>
          <td height="32"><a href="about.html" onmouseover="mouseOver()" onmouseout="mouseOut()"><img border="0" width="335" height="32" alt="About" src="images/ur4s.jpg" id="about" /></a></td>
        </tr>
        <tr>
          <td height="30"><a href="contact.html" onmouseover="mouseOver()" onmouseout="mouseOut()"><img border="0" width="335" height="30" alt="Contact" src="images/ur5s.jpg" id="contact" /></a></td>
        </tr>
        <tr>
    Why no worky?

    Also, there is already one line of javascript, is it okay to have both snippets enclosed in their own

    <script type="text/javascript"></script>

    does it matter or should both bits of code be inside the same?
    ~ mikeycorn
    With over 72,000 questions worth of user submitted quizzes, it's the world's most popular quiz creation software:
    PEST - The Personal Exam Self-Tester

  2.  

  3. #2
    Member ungus's Avatar
    Join Date
    Aug 2009
    Location
    Iowa
    Posts
    72
    Member #
    19722
    Hi Mike,

    You're very close. Whats happening, is the second set of mouseOver and mouseOut functions in your Javascript code, are overriding the first set. If you named them mouseOver2 and mouseOut2, and updated the html names; it would fix the products rollovers. And you would have to do the same for the others, mouseOver3 and mouseOut3, and so on.

    To avoid all that, I made a version of yours, using some different Javascript. Check it out and see if it makes sense, if you need any advice just holler.

    You can view an example here:
    http://dev.ungus.com/js-img-rollover-example/

    Or download the contents here:
    http://dev.ungus.com/js-img-rollover...er-example.zip

    Hope this helps.

    Ungus
    Josh


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:21 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com