Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onmouseout image closes

    Need to know how I can get the following code (or a better solution) to show several links that will display am image and when the mouse moves over the image it displays a different image. On mouseout, it will kill the image. Any suggestions??

    <html>
    <head>
    <title>Olde World Christmas Cards</title>
    <script language="javascript">
    <!-- Hide from old browsers

    //-->
    </script>
    </head>
    <body>
    <center>
    <h2>OLDE WORLD CHRISTMAS CARDS<br><br>To Select A Card, Click On One Of The Following Links...</h2>
    <table width="650">
    <form name="myform>
    <tr>
    <td valign="top">
    <a href="../images/card1.jpg" onclick="document.images['pic1'].style.display='inline';return false">Gold Foil Trees
    </a>
    </td>
    <td valign="top">
    <img src="../images/card1.jpg" name="pic1" style="display:none" onMouseOver="src='../images/insert1.gif'; return true" onMouseOut="src='../images/card1.jpg';return true">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <a href="../images/card2.jpg" onclick="document.images['pic2'].style.display='inline';return false">Foil Christmas Tree
    </a>
    </td>
    <td valign="top">
    <img src="../images/card2.jpg" name="pic2" style="display:none" onMouseOver="src='../images/insert2.gif'; return true" onMouseOut="src='../images/card2.jpg';return true">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <a href="../images/card3.jpg" onclick="document.images['pic3'].style.display='inline';return false">Snowman on Beach
    </a>
    </td>
    <td valign="top">
    <img src="../images/card3.jpg" name="pic3" style="display:none" onMouseOver="src='../images/insert3.gif'; return true" onMouseOut="src='../images/card3.jpg';return true">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <a href="../images/card4.jpg" onclick="document.images['pic4'].style.display='inline';return false">Snowy Drive
    </a>
    </td>
    <td valign="top">
    <img src="../images/card4.jpg" name="pic4" style="display:none" onMouseOver="src='../images/insert4.gif'; return true" onMouseOut="src='../images/card4.jpg';return true">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <a href="../images/card5.jpg" onclick="document.images['pic5'].style.display='inline';return false">Foil Ornament
    </a>
    </td>
    <td valign="top">
    <img src="../images/card5.jpg" name="pic5" style="display:none" onMouseOver="src='../images/insert5.gif'; return true" onMouseOut="src='../images/card5.jpg';return true">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <a href="../images/card6.jpg" onclick="document.images['pic6'].style.display='inline';return false">Peace Dove
    </a>
    </td>
    <td valign="top">
    <img src="../images/card6.jpg" name="pic6" style="display:none" onMouseOver="src='../images/insert6.gif'; return true" onMouseOut="src='../images/card6.jpg';return true">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <a href="../images/card7.jpg" onclick="document.images['pic7'].style.display='inline';return false">Snowmen Hannukah
    </a>
    </td>
    <td valign="top">
    <img src="../images/card7.jpg" name="pic7" style="display:none" onMouseOver="src='../images/insert7.gif'; return true" onMouseOut="src='../images/card7.jpg';return true">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <a href="../images/card8.jpg" onclick="document.images['pic8'].style.display='inline';return false">Americana Ornaments
    </a>
    </td>
    <td valign="top">
    <img src="../images/card8.jpg" name="pic8" style="display:none" onMouseOver="src='../images/insert8.gif'; return true" onMouseOut="src='../images/card8.jpg';return true">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <a href="../images/card9.jpg" onclick="document.images['pic9'].style.display='inline';return false">Sled
    </a>
    </td>
    <td valign="top">
    <img src="../images/card9.jpg" name="pic9" style="display:none" onMouseOver="src='../images/insert9.gif'; return true" onMouseOut="src='../images/card9.jpg';return true">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <a href="../images/card10.jpg" onclick="document.images['pic10'].style.display='inline';return false">Burgundy Ornaments
    </a>
    </td>
    <td valign="top">
    <img src="../images/card10.jpg" name="pic10" style="display:none" onMouseOver="src='../images/insert10.gif'; return true" onMouseOut="src='../images/card10.jpg';return true">
    </td>
    </tr>
    </form>
    </table>
    </center>
    </body>
    </html>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try using different z-index (zIndex if using on-the-fly methods) instead of display.

    Dispaly:none is that that is "killing", as you said, your image, as display:none makes your object dissapear, litteraly, so there is no object to rollover on...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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