Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 295
  • Last Modified:

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/background.jpg"); background-attachment:fixed; }
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(layerName);
                targetElement.style.visibility = 'visible';
            }
        }


        function hideLayer(layerName, layerName2, layerName3)
        {
            if (document.getElementById)
            {
                var targetElement = document.getElementById(layerName);
                var targetElement2 = document.getElementById(layerName2);
                var targetElement3 = document.getElementById(layerName3);
                targetElement.style.visibility = 'hidden';
                targetElement2.style.visibility = 'hidden';
                targetElement3.style.visibility = '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('NewsLayer'); hideLayer('XposureLayer' , 'VideoLayer' , 'SpotlightLayer'); document.news.src='/img/news_over.gif'; document.xposure.src='/img/xposure.gif'; document.video.src='/img/video.gif'; document.spotlight.src='/img/spotlight.gif';" name="news"><img class="button" src="/img/xposure.gif" onmouseover="showLayer('XposureLayer'); hideLayer('NewsLayer' , 'VideoLayer' , 'SpotlightLayer'); document.xposure.src='/img/xposure_over.gif'; document.news.src='/img/news.gif'; document.video.src='/img/video.gif'; document.spotlight.src='/img/spotlight.gif';" name="xposure"><img class="button" src="/img/video.gif" onmouseover="showLayer('VideoLayer'); hideLayer('NewsLayer' , 'XposureLayer' , 'SpotlightLayer'); document.video.src='/img/video_over.gif'; document.news.src='/img/news.gif'; document.xposure.src='/img/xposure.gif'; document.spotlight.src='/img/spotlight.gif';" name="video"><img class="button" src="/img/spotlight.gif" onmouseover="showLayer('SpotlightLayer'); hideLayer('NewsLayer' , 'XposureLayer' , 'VideoLayer'); document.spotlight.src='/img/spotlight_over.gif'; document.news.src='/img/news.gif'; document.xposure.src='/img/xposure.gif'; document.video.src='/img/video.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.className='HotSpotOver';"
 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.className='FollowUpOver';"
 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.className='FollowUpOver';"
 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.className='FollowUpOver';"
 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.className='MoreOver';"
 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.jpg"><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.className='HotSpotOver';"
 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.className='FollowUpOver';"
 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.className='FollowUpOver';"
 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.className='FollowUpOver';"
 onMouseOut="this.className='FollowUp';">
         <b><u>Content</u></b><br>more content
         </td>
         </a>
         </tr>
         <tr>
         <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.className='MoreOver';"
 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.className='HotSpotOver';"
 onMouseOut="this.className='HotSpot';">
         <b><u>Content</u></b><br>more 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.className='FollowUpOver';"
 onMouseOut="this.className='FollowUp';">
         <b><u>Content</u></b><br>more content
         </td>
         </a>
         </tr>
         <tr>
         <a href="/watch">
         <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.className='FollowUpOver';"
 onMouseOut="this.className='FollowUp';">
         <b><u>content</u></b><br>More content
         </td>
         </a>
         </tr>
         <tr>
         <a href="/watch">
         <td class="FollowUp" width="180" height="100" valign="middle" onMouseOver="this.className='FollowUpOver';"
 onMouseOut="this.className='FollowUp';">
         <b><u>Content</u></b><br>More Content
         </td>
         </a>
         </tr>
         <tr>
         <a href="/watch">
         <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.className='MoreOver';"
 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.jpg"><br>
         </td>
         </tr>
         <tr>
         <td class="HotSpot" width="190" height="160" valign="middle" onMouseOver="this.className='HotSpotOver';"
 onMouseOut="this.className='HotSpot';">
         <b><u>Content</u></b><br>content
         </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.className='FollowUpOver';"
 onMouseOut="this.className='FollowUp';">
         <b><u>Content</u></b><br>Content
         </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.className='FollowUpOver';"
 onMouseOut="this.className='FollowUp';">
         <b><u>Content</u></b><br>Content
         </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.className='FollowUpOver';"
 onMouseOut="this.className='FollowUp';">
         <b><u>Content</u></b><br>Content
         </td>
         </a>
         </tr>
         <tr>
         <td class="More" width="180" height="20" bgcolor="#333333" onMouseOver="this.className='MoreOver';"
 onMouseOut="this.className='More';">
         <b><u>Content</u></b
         </td>
         </tr>
         </table>
      </td>
      </tr>
      </table>
      </div>

   </td>
   </tr>
   </table>
</td>
</tr>
</table>
</body>
</html>
0
andreni78
Asked:
andreni78
1 Solution
 
devicCommented:
hi andreni78,

simple answer is, add to body onlad:
==========================
<body onload="showLayer('NewsLayer'); hideLayer('XposureLayer' , 'VideoLayer' , 'SpotlightLayer');">
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now