...

View Full Version : onmouseout image closes



tcade@fuse.net
01-14-2004, 08:38 PM
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>

Kor
01-15-2004, 09:00 AM
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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum