andreni78
asked on
Help with mouseover effects
I'm trying to do a mouseover effect over tables.. it works if you place your mouse over the 4 images on top(broken images) and then place your mouse over the content tables.. you'll see the mouse over effect... BUT if you first load the page up and go straight to the content table cells.. it doesn't have any mouse over effects.. only after when you place your mouse over the four broken images - only then the mouseover effect will work.. i'm asking if you could fix this code for me somehow to make it work.. ideally i'd like it to be cleaned if possible.. thanks!
Here's the code:
<html>
<head>
<style tyle="text/css">
body {margin:0; background-image:url("/img /backgroun d.jpg"); background-attachment:fixe d; }
table {font-family: Verdana; font-size: 11px; color: #FFFFFF;}
.BodyBorder {border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD;}
.news
    {
      visibility: visible;
                 position: absolute;
    }
.xposure
    {
      visibility: hidden;
      position: absolute;
    }
.video
    {
      visibility: hidden;
      position: absolute;
    }
.spotlight
    {
      visibility: hidden;
      position: absolute;
    }
.button {cursor: hand;}
.HotSpot {padding: 7px;}
.HotSpotOver {padding:7px; background:#CCCCCC; color:#333333; border:1px solid #FFFFFF;}
.FollowUp {padding: 7px; color: #333333; border-bottom: 1px solid #999999}
.FollowUpOver {padding: 7px; background:#666666; color:#FFFFFF; border: 1px solid #FFFFFF;}
.More {padding-left: 7px;}
.MoreOver {padding-left: 7px; background: #FF8800;}
.Hand {cursor: hand;}
</style>
    <script type="text/javascript"><!- -
    function showLayer(layerName)
    {
      if (document.getElementById) // Netscape 6 and IE 5+
      {
        var targetElement = document.getElementById(la yerName);
        targetElement.style.visibi lity = 'visible';
      }
    }
    function hideLayer(layerName, layerName2, layerName3)
    {
      if (document.getElementById)
      {
        var targetElement = document.getElementById(la yerName);
        var targetElement2 = document.getElementById(la yerName2);
        var targetElement3 = document.getElementById(la yerName3);
        targetElement.style.visibi lity = 'hidden';
        targetElement2.style.visib ility = 'hidden';
        targetElement3.style.visib ility = 'hidden';
      }
    }
    // -->
    </script>
</head>
<body>
<center>
<table width="334" cellpadding="0" cellspacing="0">
<tr>
<td class="BodyBorder">
<table width="380" height="350" bgcolor="#333333" cellpadding="0" cellspacing="0">
<tr>
<td width="380" height="350" align="center" valign="middle">
  <table width="380" height="350" bgcolor="#333333" cellpadding="0" cellspacing="0">
  <tr>
  <td width="380" height="25">
<img class="button" src="/img/news_over.gif" onmouseover="showLayer('Ne wsLayer'); hideLayer('XposureLayer' , 'VideoLayer' , 'SpotlightLayer'); document.news.src='/img/ne ws_over.gi f'; document.xposure.src='/img /xposure.g if'; document.video.src='/img/v ideo.gif'; document.spotlight.src='/i mg/spotlig ht.gif';" name="news"><img class="button" src="/img/xposure.gif" onmouseover="showLayer('Xp osureLayer '); hideLayer('NewsLayer' , 'VideoLayer' , 'SpotlightLayer'); document.xposure.src='/img /xposure_o ver.gif'; document.news.src='/img/ne ws.gif'; document.video.src='/img/v ideo.gif'; document.spotlight.src='/i mg/spotlig ht.gif';" name="xposure"><img class="button" src="/img/video.gif" onmouseover="showLayer('Vi deoLayer') ; hideLayer('NewsLayer' , 'XposureLayer' , 'SpotlightLayer'); document.video.src='/img/v ideo_over. gif'; document.news.src='/img/ne ws.gif'; document.xposure.src='/img /xposure.g if'; document.spotlight.src='/i mg/spotlig ht.gif';" name="video"><img class="button" src="/img/spotlight.gif" onmouseover="showLayer('Sp otlightLay er'); hideLayer('NewsLayer' , 'XposureLayer' , 'VideoLayer'); document.spotlight.src='/i mg/spotlig ht_over.gi f'; document.news.src='/img/ne ws.gif'; document.xposure.src='/img /xposure.g if'; document.video.src='/img/v ideo.gif'; " name="spotlight"><br>
  </td>
  </tr>
  <tr>
  <td width="380" height="5" bgcolor="#FF8800">
  </td>
  </tr>
  <tr>
  <td width="380" height="320" valign="top">
   <div id="NewsLayer" class="news">
   <table class="Hand" width="380" height="320" bgcolor="#555555" cellpadding="0" cellspacing="0">
   <tr>
   <td width="190" valign="top">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <td width="190" height="160">
     <a href="/channels"><img src="/img/channels_hs.jpg" border="0"></a><br>
     </td>
     </tr>
     <tr>
     <a href="/channels">
     <td class="HotSpot" width="190" height="160" valign="middle" onMouseOver="this.classNam e='HotSpot Over';"
 onMouseOut="this.className ='HotSpot' ;">
     <u><b>Main Content</b></u><br>fluffy
     </td>
     </a>
     </tr>
     </table>
   </td>
   <td width="190" bgcolor="#BBBBBB" valign="middle">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=18">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <u><b>Content A</b></u><br>stuff, fluff
     </td>
     </a>
     </tr>
     <tr>
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <u><b>Content B</b></u><br>more fluff</td>
     </tr>
     <tr>
      <a href="/facts">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <u><b>Content C</b></u><br>even more fluff
     </td>
      </a>
     </tr>
     <tr>
     <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.classNam e='MoreOve r';"
 onMouseOut="this.className ='More';">
     <b><u>Content</u></b>
     </td>
     </tr>
     </table>
   </td>
   </tr>
   </table>
   </div>
   <div id="XposureLayer" class="xposure">
   <table class="Hand" width="380" height="320" bgcolor="#555555" cellpadding="0" cellspacing="0">
   <tr>
   <td width="190" valign="top">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=15">
     <td width="190" height="160">
     <img src="/img/yougotbeef_hs.jp g"><br>
     </td>
     </a>
     </tr>
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=15">
     <td class="HotSpot" width="190" height="160" valign="middle" onMouseOver="this.classNam e='HotSpot Over';"
 onMouseOut="this.className ='HotSpot' ;">
     <b><u>Content A</u></b><br>Flufffffff
     </td>
     </a>
     </tr>
     </table>
   </td>
   <td width="190" bgcolor="#BBBBBB" valign="middle">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=12">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <b><u>Content B</u></b><br>Fluffster
     </td>
     </a>
     </tr>
     <tr>
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <b><u>Content C</u></b><br>Fluff
     </td>
     </tr>
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=16">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <b><u>Content</u></b><br>m ore content
     </td>
     </a>
     </tr>
     <tr>
     <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.classNam e='MoreOve r';"
 onMouseOut="this.className ='More';">
     <b><u>Content</u></b>
     </td>
     </tr>
     </table>
   </td>
   </tr>
   </table>
   </div>
   <div id="VideoLayer" class="video">
   <table class="Hand" width="380" height="320" bgcolor="#555555" cellpadding="0" cellspacing="0">
   <tr>
   <td width="190" valign="top">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="/watch">
     <td width="190" height="160">
     <img src="/img/uvsa_hs.jpg"><br >
     </td>
     </a>
     </tr>
     <tr>
     <a href="/watch">
     <td class="HotSpot" width="190" height="160" valign="middle" onMouseOver="this.classNam e='HotSpot Over';"
 onMouseOut="this.className ='HotSpot' ;">
     <b><u>Content</u></b><br>m ore content
     </td>
     </a>
     </tr>
     </table>
   </td>
   <td width="190" bgcolor="#BBBBBB" valign="middle">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="/watch">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <b><u>Content</u></b><br>m ore content
     </td>
     </a>
     </tr>
     <tr>
     <a href="/watch">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <b><u>content</u></b><br>M ore content
     </td>
     </a>
     </tr>
     <tr>
     <a href="/watch">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <b><u>Content</u></b><br>M ore Content
     </td>
     </a>
     </tr>
     <tr>
     <a href="/watch">
     <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.classNam e='MoreOve r';"
 onMouseOut="this.className ='More';">
     <b><u>Content</u></b>
     </td>
     </a>
     </tr>
     </table>
   </td>
   </tr>
   </table>
   </div>
   <div id="SpotlightLayer" class="spotlight">
   <table class="Hand" width="380" height="320" bgcolor="#555555" cellpadding="0" cellspacing="0">
   <tr>
   <td width="190" valign="top">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <td width="190" height="160">
     <img src="/img/petenguyen_hs.jp g"><br>
     </td>
     </tr>
     <tr>
     <td class="HotSpot" width="190" height="160" valign="middle" onMouseOver="this.classNam e='HotSpot Over';"
 onMouseOut="this.className ='HotSpot' ;">
     <b><u>Content</u></b><br>c ontent
     </td>
     </tr>
     </table>
   </td>
   <td width="190" bgcolor="#BBBBBB" valign="middle">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=19">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <b><u>Content</u></b><br>C ontent
     </td>
     </a>
     </tr>
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=11">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <b><u>Content</u></b><br>C ontent
     </td>
     </a>
     </tr>
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=8">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam e='FollowU pOver';"
 onMouseOut="this.className ='FollowUp ';">
     <b><u>Content</u></b><br>C ontent
     </td>
     </a>
     </tr>
     <tr>
     <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.classNam e='MoreOve r';"
 onMouseOut="this.className ='More';">
     <b><u>Content</u></b
     </td>
     </tr>
     </table>
   </td>
   </tr>
   </table>
   </div>
  </td>
  </tr>
  </table>
</td>
</tr>
</table>
</body>
</html>
Here's the code:
<html>
<head>
<style tyle="text/css">
body {margin:0; background-image:url("/img
table {font-family: Verdana; font-size: 11px; color: #FFFFFF;}
.BodyBorder {border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD;}
.news
    {
      visibility: visible;
                 position: absolute;
    }
.xposure
    {
      visibility: hidden;
      position: absolute;
    }
.video
    {
      visibility: hidden;
      position: absolute;
    }
.spotlight
    {
      visibility: hidden;
      position: absolute;
    }
.button {cursor: hand;}
.HotSpot {padding: 7px;}
.HotSpotOver {padding:7px; background:#CCCCCC; color:#333333; border:1px solid #FFFFFF;}
.FollowUp {padding: 7px; color: #333333; border-bottom: 1px solid #999999}
.FollowUpOver {padding: 7px; background:#666666; color:#FFFFFF; border: 1px solid #FFFFFF;}
.More {padding-left: 7px;}
.MoreOver {padding-left: 7px; background: #FF8800;}
.Hand {cursor: hand;}
</style>
    <script type="text/javascript"><!-
    function showLayer(layerName)
    {
      if (document.getElementById) // Netscape 6 and IE 5+
      {
        var targetElement = document.getElementById(la
        targetElement.style.visibi
      }
    }
    function hideLayer(layerName, layerName2, layerName3)
    {
      if (document.getElementById)
      {
        var targetElement = document.getElementById(la
        var targetElement2 = document.getElementById(la
        var targetElement3 = document.getElementById(la
        targetElement.style.visibi
        targetElement2.style.visib
        targetElement3.style.visib
      }
    }
    // -->
    </script>
</head>
<body>
<center>
<table width="334" cellpadding="0" cellspacing="0">
<tr>
<td class="BodyBorder">
<table width="380" height="350" bgcolor="#333333" cellpadding="0" cellspacing="0">
<tr>
<td width="380" height="350" align="center" valign="middle">
  <table width="380" height="350" bgcolor="#333333" cellpadding="0" cellspacing="0">
  <tr>
  <td width="380" height="25">
<img class="button" src="/img/news_over.gif" onmouseover="showLayer('Ne
  </td>
  </tr>
  <tr>
  <td width="380" height="5" bgcolor="#FF8800">
  </td>
  </tr>
  <tr>
  <td width="380" height="320" valign="top">
   <div id="NewsLayer" class="news">
   <table class="Hand" width="380" height="320" bgcolor="#555555" cellpadding="0" cellspacing="0">
   <tr>
   <td width="190" valign="top">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <td width="190" height="160">
     <a href="/channels"><img src="/img/channels_hs.jpg"
     </td>
     </tr>
     <tr>
     <a href="/channels">
     <td class="HotSpot" width="190" height="160" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <u><b>Main Content</b></u><br>fluffy
     </td>
     </a>
     </tr>
     </table>
   </td>
   <td width="190" bgcolor="#BBBBBB" valign="middle">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=18">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <u><b>Content A</b></u><br>stuff, fluff
     </td>
     </a>
     </tr>
     <tr>
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <u><b>Content B</b></u><br>more fluff</td>
     </tr>
     <tr>
      <a href="/facts">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <u><b>Content C</b></u><br>even more fluff
     </td>
      </a>
     </tr>
     <tr>
     <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b>
     </td>
     </tr>
     </table>
   </td>
   </tr>
   </table>
   </div>
   <div id="XposureLayer" class="xposure">
   <table class="Hand" width="380" height="320" bgcolor="#555555" cellpadding="0" cellspacing="0">
   <tr>
   <td width="190" valign="top">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=15">
     <td width="190" height="160">
     <img src="/img/yougotbeef_hs.jp
     </td>
     </a>
     </tr>
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=15">
     <td class="HotSpot" width="190" height="160" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content A</u></b><br>Flufffffff
     </td>
     </a>
     </tr>
     </table>
   </td>
   <td width="190" bgcolor="#BBBBBB" valign="middle">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=12">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content B</u></b><br>Fluffster
     </td>
     </a>
     </tr>
     <tr>
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content C</u></b><br>Fluff
     </td>
     </tr>
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=16">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b><br>m
     </td>
     </a>
     </tr>
     <tr>
     <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b>
     </td>
     </tr>
     </table>
   </td>
   </tr>
   </table>
   </div>
   <div id="VideoLayer" class="video">
   <table class="Hand" width="380" height="320" bgcolor="#555555" cellpadding="0" cellspacing="0">
   <tr>
   <td width="190" valign="top">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="/watch">
     <td width="190" height="160">
     <img src="/img/uvsa_hs.jpg"><br
     </td>
     </a>
     </tr>
     <tr>
     <a href="/watch">
     <td class="HotSpot" width="190" height="160" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b><br>m
     </td>
     </a>
     </tr>
     </table>
   </td>
   <td width="190" bgcolor="#BBBBBB" valign="middle">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="/watch">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b><br>m
     </td>
     </a>
     </tr>
     <tr>
     <a href="/watch">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>content</u></b><br>M
     </td>
     </a>
     </tr>
     <tr>
     <a href="/watch">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b><br>M
     </td>
     </a>
     </tr>
     <tr>
     <a href="/watch">
     <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b>
     </td>
     </a>
     </tr>
     </table>
   </td>
   </tr>
   </table>
   </div>
   <div id="SpotlightLayer" class="spotlight">
   <table class="Hand" width="380" height="320" bgcolor="#555555" cellpadding="0" cellspacing="0">
   <tr>
   <td width="190" valign="top">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <td width="190" height="160">
     <img src="/img/petenguyen_hs.jp
     </td>
     </tr>
     <tr>
     <td class="HotSpot" width="190" height="160" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b><br>c
     </td>
     </tr>
     </table>
   </td>
   <td width="190" bgcolor="#BBBBBB" valign="middle">
     <table width="190" height="320" cellpadding="0" cellspacing="0">
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=19">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b><br>C
     </td>
     </a>
     </tr>
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=11">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b><br>C
     </td>
     </a>
     </tr>
     <tr>
     <a href="http://www.mysite.com/articles/article.php?articleID=8">
     <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b><br>C
     </td>
     </a>
     </tr>
     <tr>
     <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.classNam
 onMouseOut="this.className
     <b><u>Content</u></b
     </td>
     </tr>
     </table>
   </td>
   </tr>
   </table>
   </div>
  </td>
  </tr>
  </table>
</td>
</tr>
</table>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.