Mouse Over Text doesn't appear in Firefox

Dhow12 · 10-27-2010, 05:56 PM

I put in a code, so that when you hover over a link, text appears at the bottom of the page. My code works fine in IE 8, but the text doesn't appear in Firefox. I ran Firebug, and it gave me a "detailsbox is not defined" error. I'm still trying to figure javascript out, and could really use your help!

Thanks

Code:

<script type="text/javascript">

  function menu (whichMenu,whatState){ 
  if (document.getElementById) 
  {document.getElementById(whichMenu).style.visibility = whatState;} 
 
  else {document[whichMenu].visibility = whatState;} 
 
  } 
  function details(what){ 
  myInfo={"Threat":"text.",
          "Compliance":"text.",
          "Virtualization":"text.",
          "Convergence":"text."} 
  detailsBox.innerHTML=myInfo[what] 
  } 

</script>

<LINK href="main.css" rel="stylesheet" type="text/css">

<style type="text/css">
<!--
a.black:link {color: #000000;}
a.black:active {color: #000000;}
a.black:visited {color: #000000;}
a.black:hover {color: #000000;}

a.red:link {color: #ff0000;}
a.red:active {color: #ff0000;}
a.red:visited {color: #ff0000;}
a.red:hover {color: #ff0000;}
-->
</style>

<script type="text/javascript">
function newPopup(url) {popupWindow = window.open(url,'popUpWindow','dependent=yes,height=570,width=750,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')}
</script>
<script type="text/javascript">
function newPopup2(url) {popupWindow = window.open(url,'popUpWindow','dependent=yes,height=570,width=750,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')}
</script>

</head>
<body bgcolor="#c1c2c2">
	
<table width="1065" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065" height="24"></td></tr>

</table>
<table width="1065" bgcolor="white" cellpadding="0" cellspacing="0" border="0">
<tr><td><img src="images/White_Rectangle.jpg" width="17" height="55"></td><td colspan="5"><a href="index.html"><img src="images/Trend_Micro_Securing_Your_Web_World_Logo.gif" border="0"></a></td>
<td><img src="images/White_Rectangle.jpg" width="100" height="55"></td>
<td align="right"><font size="2" face="Interstate-Regular"><a href="JavaScript:newPopup('help.html');" style="text-decoration:none" class="red">Help</a></font>
<font size="2" face="Interstate-Regular" color="gray">&nbsp;&nbsp;|&nbsp;&nbsp;</font>
<font size="2" face="Interstate-Regular"><a href="JavaScript:newPopup2('quiz.html');" style="text-decoration:none" class="red">Feedback</a></font>
<br>
<br>
<font size="2" face="Interstate-Regular"><a href="http://www.trendmicro.com" style="text-decoration:none" class="black" target="blank">www.trendmicro.com</a></font>
</td>
<td><img src="images/White_Rectangle.jpg" width="25" height="55"></td>
</tr>
</table>

<table width="1065" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065" height="18"></td></tr>
</table>

<table width="1065" cellpadding="0" cellspacing="0" border="0">
<tr><td><A HREF="products.html" onmouseover="document.but.src='images/Upsell_Reference_Gradient.jpg'"onmouseout="document.but.src='images/Upsell_Reference_Tab.jpg'"><IMG SRC="images/Upsell_Reference_Tab.jpg" NAME="but" width="178" height="38" BORDER="0"></A></td><td><A HREF="competitor_products.html" onmouseover="document.but2.src='images/Competitor_Products_Gradient.jpg'"onmouseout="document.but2.src='images/Competitor_Products_Tab.jpg'"><IMG SRC="images/Competitor_Products_Tab.jpg" NAME="but2" width="178" height="38" BORDER="0"></A></td><td><img src="images/Red_Bar.jpg" width="178" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td></tr>
<tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065"></td></tr>
</table>

	<table width="1024" cellpadding="0" cellspacing="0" border="0">
     <tr>
    	<td  valign="top">
        	   <table cellpadding="0" cellspacing="0" border="0" >
               <tr>
               	  <td valign="top" bgcolor="#FFFFFF">
                  	<div style="overflow:auto; width:300px; height:820px; background-color:#ebebe9; text-align:right; padding-right:1px;">
                    <div style="text-align:left;">
               		<a href="index.html"><img src="images/home_btn.jpg" border="0" /></a>
                    <div class="glossymenu" >
                        <a class="menuitem submenuheader" href="" ><div style="margin-top:4px;">Client/Server Suite</div></a>
                            <div class="submenu">
                                <ul>
                                <li><a onmouseover="details('Threat')" href="products_css_detail1.html" target="mainBody" class="menulink">Threat Landscape</a></li>
                                <li><a onmouseover="details('Compliance')" href="products_css_detail2.html" target="mainBody" class="menulink">Security Compliance</a></li>
                                <li><a onmouseover="details('Convergence')" href="products_css_detail4.html" target="mainBody" class="menulink">Convergence and Cost Reduction</a></li>
                                </ul>
                            </div>

Old Pedant · 10-27-2010, 08:35 PM

You don't show where detailsbox is on your page. But surely the problem is that only MSIE will allow you to use a bare name or id to refer to an object.

*PROBABLY* the answer is to rewrite

Code:

  detailsBox.innerHTML=myInfo[what]

as

Code:

  document.getElementById("detailsBox").innerHTML=myInfo[what];

But if that doesn't work, show what detailsBox *is*.

Dhow12 · 10-28-2010, 02:26 PM

I made the change and it's now working on all of the browsers I've tried.
Thanks a ton for the help!