#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    2
    Rep Power
    0

    Mouseover Text Not Working In Firefox


    On the mouseover of text in one table/cell, I'm looking to change the background color of a cell in a different table.

    The code below works in Chrome & IE 8 but not Firefox (3.6.2)

    I tried it with javascript also.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .hlt {
    	background-color: yellow;
    	color: black;
    }
    #testtag {
    	color: #666;
    	position: absolute;
    	top: 44px;
    	left: 0px;
    	text-align: center;
    }
    #maintag {
    	color: #000;
    	position: absolute;
    	top: 100px;
    	left: 0px;
    	background-color:#CC6
    }
    
    </style>
    <script type="text/javascript">
        function mouse_event(obj, newClass) {
        obj.className = newClass;
    }
    </script>
    
    </head>
    
    <body>
      
    <div id="maintag">
      <table width="900" height="37" border="0" cellpadding="0" cellspacing="0">
        <tr>
           <td width="150"  id="cellone">&nbsp;</td>
          <td width="150" id="celltwo">&nbsp;</td>
          <td width="150" id="celltre">&nbsp;</td>
          <td width="150" id="cellfour">&nbsp;</td>
          <td width="150" id="cellfive">&nbsp;</td>
            <td width="150" id="cellsix">&nbsp;</td>
        </tr>
      </table>
    </div>
    <div id="testtag">
      <table width="900" height="37" border="0" cellpadding="0" cellspacing="0">
        <tr>
    		<td width="150"><a href="#" onmouseover="cellone.className = 'hlt';" onmouseout="cellone.className = '';">Data 1.1</a></td>
            <td width="150"><a href="#" onmouseover="celltwo.className = 'hlt';" onmouseout="celltwo.className = '';">Data 1.2</td>
            <td width="150"><a href="#" onmouseover="mouse_event(celltre, 'hlt');" onmouseout="mouse_event(celltre, '');">Data 1.3</td>
            <td width="150"><a href="#" onmouseover="cellfour.className = 'hlt';" onmouseout="cellfour.className = '';">Data 2.1</td>
            <td width="150"><a href="#" onmouseover="cellfive.className = 'hlt';" onmouseout="cellfive.className = '';">Data 2.2</td>
            <td width="150"><a href="#" onmouseover="cellsix.className = 'hlt';" onmouseout="cellsix.className = '';">Data 2.3</td>
        </tr>
      </table>
    </div>
    </body>
    </html>
  2. #2
  3. A94528C464D168DC82FE4933E9DF37
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Location
    California
    Posts
    119
    Rep Power
    77
    In your javascript, use HTML DOM accessors, because standards-compliant browsers love DOM

    Code:
    document.getElementById('cellone').className = ........

    Comments on this post

    • Kravvitz agrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    2
    Rep Power
    0
    that worked. THANKS

IMN logo majestic logo threadwatch logo seochat tools logo