Solved

Help with mouseover effects

Posted on 2004-10-11
1
287 Views
Last Modified: 2012-06-27
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
Comment
Question by:andreni78
1 Comment
 
LVL 25

Accepted Solution

by:
devic earned 125 total points
ID: 12281904
hi andreni78,

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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html Table looping 4 25
jQuery Dialog Autoresize Bug 2 25
Do alert on select 6 13
Can anyone see what is the fault in my javascript code? 8 28
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question