Problems using onMouseOver w/series of image links

Discussion in 'JavaScript' started by Ahab(FXseas), Oct 2, 2008.

0
  1. #1
    Hello-

    Please keep in mind, this is my first attempt at JavaScript. I've attempted this two different ways, each resulting in different, but incorrect functions. I have a series of 4 images, and each has a partner for onMouseOver. The first attempt will cause the bottom image only to change when the cursor hovers over any of the four images. The second attempt will cause all four images to change simultaneously when the cursor hovers over any one image.

    Even though I only have two "attempts", I messed with each for a long time, and can't get either to work.

    First Attempt:

    <script type="text/javascript">
    function mouseOver()
    {
    document.bt.src ="Blue-Buy-Button-Top_on.gif";
    }
    function mouseOut()
    {
    document.bt.src ="Blue-Buy-Button-Top_off.gif";
    }
    </script>

    <script type="text/javascript">
    function mouseOver()
    {
    document.bb.src ="Blue-Buy-Button-Bottom_on.gif";
    }
    function mouseOut()
    {
    document.bb.src ="Blue-Buy-Button-Bottom_off.gif";
    }
    </script>

    <script type="text/javascript">
    function mouseOver()
    {
    document.st.src ="Blue-Sell-Button-Top_on.gif";
    }
    function mouseOut()
    {
    document.st.src ="Blue-Sell-Button-Top_off.gif";
    }
    </script>

    <script type="text/javascript">
    function mouseOver()
    {
    document.sb.src ="Blue-Sell-Button-Bottom_on.gif";
    }
    function mouseOut()
    {
    document.sb.src ="Blue-Sell-Button-Bottom_off.gif";
    }
    </script>

    </head>
    <body>
    <!--#include file="includes/menu.inc"-->
    <div id="pagebody">
    <div id="left">
    <div id="content">
    <h3 title="xxx">xxx</h3>
    <br>

    <img style="float: right; border: 1px solid #000; margin: 0px 35px 0px 0px; padding: 1px" src="buttons\Video placeholder (Custom).gif" width="280" height="280" />

    <p>
    <a href="search.asp"
    onmouseover="mouseOver()"
    onmouseout="mouseOut()">
    <img border="0" alt="..."
    src="Blue-Buy-Button-Top_off.gif" name="bt" /></a>
    </p>

    <p>
    <a href="rscbuyers.asp"
    onmouseover="mouseOver()"
    onmouseout="mouseOut()">
    <img border="0" alt="..."
    src="Blue-Buy-Button-Bottom_off.gif" name="bb" /></a>
    </p>

    <p>
    <a href="listyourhome.asp"
    onmouseover="mouseOver()"
    onmouseout="mouseOut()">
    <img border="0" alt="..."
    src="Blue-Sell-Button-Top_off.gif" name="st" /></a>
    </p>

    <p>
    <a href="rscbuyers.asp"
    onmouseover="mouseOver()"
    onmouseout="mouseOut()">
    <img border="0" alt="..."
    src="Blue-Sell-Button-Bottom_off.gif" name="sb" /></a>
    </p>


    Second Attempt:

    <script type="text/javascript">
    function mouseOver()
    {
    document.bt.src ="Blue-Buy-Button-Top_on.gif";
    document.bb.src ="Blue-Buy-Button-Bottom_on.gif";
    document.st.src ="Blue-Sell-Button-Top_on.gif";
    document.sb.src ="Blue-Sell-Button-Bottom_on.gif";
    }
    function mouseOut()
    {
    document.bt.src ="Blue-Buy-Button-Top_off.gif";
    document.bb.src ="Blue-Buy-Button-Bottom_off.gif";
    document.st.src ="Blue-Sell-Button-Top_off.gif";
    document.sb.src ="Blue-Sell-Button-Bottom_off.gif";
    }
    </script>

    </head>
    <body>
    <!--#include file="includes/menu.inc"-->
    <div id="pagebody">
    <div id="left">
    <div id="content">
    <h3 title="xxx">xxx</h3>
    <br>

    <img style="float: right; border: 1px solid #000; margin: 0px 35px 0px 0px; padding: 1px" src="buttons\Video placeholder (Custom).gif" width="280" height="280" />

    <p>
    <a href="search.asp"
    onmouseover="mouseOver()"
    onmouseout="mouseOut()">
    <img border="0" alt="..."
    src="Blue-Buy-Button-Top_off.gif" name="bt" /></a>
    </p>

    <p>
    <a href="rscbuyers.asp"
    onmouseover="mouseOver()"
    onmouseout="mouseOut()">
    <img border="0" alt="..."
    src="Blue-Buy-Button-Bottom_off.gif" name="bb" /></a>
    </p>

    <p>
    <a href="listyourhome.asp"
    onmouseover="mouseOver()"
    onmouseout="mouseOut()">
    <img border="0" alt="..."
    src="Blue-Sell-Button-Top_off.gif" name="st" /></a>
    </p>

    <p>
    <a href="rscbuyers.asp"
    onmouseover="mouseOver()"
    onmouseout="mouseOut()">
    <img border="0" alt="..."
    src="Blue-Sell-Button-Bottom_off.gif" name="sb" /></a>
    </p>


    I think that in the second attempt, lumping all the scripts together is what causes them all to change, but I can't figure out why the first attempt won't change out the correct images. Any help is greatly appreciated.
     
    Ahab(FXseas), Oct 2, 2008 IP
  2. Ahab(FXseas)

    Ahab(FXseas) Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Problem solved! I can't seem to edit the thread title, though.

    Anyway, someone helped me get this working by going in a different direction than the one I was trying. Thanks!
     
    Ahab(FXseas), Oct 2, 2008 IP