Mouseover effect on table

london01 · Sep 3, 2004

hello everybody,

I found a site with a very good example that i like to incorporate in my webpage:

http://www.pxl8.com/n6_setAttribute.html

(under the title: mouseover effect for most browsers.)
due to my exp. with html and javascript i was unable able to understand teh code enough to add to my webpage with the needed modifications.
I like to understand how its done and be able to click on a row to open a different page.
anyhelp u can give me would be greatly appreciated:

tried a test code but no go..
Robin

Code:

<html>
<head>
<title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

var r3=document.getElementById('hilite3').getElementsByTagName('tr'); 
var l=r.length; 

for (i=0;i<l;i++){
     r3[i].onmouseover = function(){this.style.backgroundColor="#fff"};
     r3[i].onmouseout = function(){this.style.backgroundColor=""};
    }
</script>


</head>


<table border="1" cellpadding="2" cellspacing="0" id="hilite3">
  <tr>
    <td>Row1 Col1</td>
    <td>Row1 Col2</td>
    <td>Row1 Col3</td>
    <td>Row1 Col4</td>
  </tr>

  <tr>
    <td>Row2 Col1</td>
    <td>Row2 Col2</td>
    <td>Row2 Col3</td>
    <td>Row2 Col4</td>
  </tr>

  <tr>
    <td>Row3 Col1</td>
    <td>Row3 Col2</td>
    <td>Row3 Col3</td>
    <td>Row3 Col4</td>
  </tr>

  <tr>
    <td>Row4 Col1</td>
    <td>Row4 Col2</td>
    <td>Row4 Col3</td>
    <td>Row4 Col4</td>
  </tr>

</table>



</body>
</html>

cLFlaVA · Sep 3, 2004

Alternative Solution

Code:

<html>
<head>
<title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<table border="1" cellpadding="2" cellspacing="0" bgcolor="#c0c0c0" id="hilite3">
<tr onmouseover="this.bgColor = '#ffffff';" onmouseout="this.bgColor = '#c0c0c0';">
    <td>Row1 Col1</td>
    <td>Row1 Col2</td>
    <td>Row1 Col3</td>
    <td>Row1 Col4</td>
</tr><tr onmouseover="this.bgColor = '#ffffff';" onmouseout="this.bgColor = '#c0c0c0';">
    <td>Row2 Col1</td>
    <td>Row2 Col2</td>
    <td>Row2 Col3</td>
    <td>Row2 Col4</td>
</tr><tr onmouseover="this.bgColor = '#ffffff';" onmouseout="this.bgColor = '#c0c0c0';">
    <td>Row3 Col1</td>
    <td>Row3 Col2</td>
    <td>Row3 Col3</td>
    <td>Row3 Col4</td>
</tr><tr onmouseover="this.bgColor = '#ffffff';" onmouseout="this.bgColor = '#c0c0c0';">
    <td>Row4 Col1</td>
    <td>Row4 Col2</td>
    <td>Row4 Col3</td>
    <td>Row4 Col4</td>
</tr></table>

</body>
</html>

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!

LFI · Sep 3, 2004

A couple of problems with the code you posted (london01):

The 'document.getElementById(...)' function won't work as written, because by the time it executes, the element with the specified-id hasn't been drawn yet and, thus, doesn't exist.

To solve this, put the JavaScript in a function (wrap it with "function setup(){" and "}"), then in the (currently absent) BODY tag, add "ONLOAD='setup()'".

Next, in the JavaScript, there is a reference to variable 'r' that should be 'r3'.

Finally, the color that you will change to with the listed background (#fff) is white, so even if it's working, if your page is white, you won't notice the effect! Change to #f0f or something else.

'hope that helps.

--Dave

LFI · Sep 3, 2004

By the way, here's the code, updated with my suggestions, AND some stuff for adding onclick functionality to the rows:

Code:

<html>
<head>
<title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
[b]function setup()
{[/b]
var r3=document.getElementById('hilite3').getElementsByTagName('tr'); 
var l=r3.length; 

for (i=0;i<l;i++){
     r3[i].onmouseover = function(){this.style.backgroundColor="[b]#f0f[/b]"};
     [b]r3[i].onclick = function(){if(this.id && this.id!='')window.location=this.id};[/b]
     r3[i].onmouseout = function(){this.style.backgroundColor=""};
    }
[b]}[/b]
</script>
</head>
[b]<body onload='setup()'>[/b]
<table border="1" cellpadding="2" cellspacing="0" id="hilite3">
  <tr [b]id='[URL unfurl="true"]http://www.google.com'[/URL][/b]>
    <td>Row1 Col1</td>
    <td>Row1 Col2</td>
    <td>Row1 Col3</td>
    <td>Row1 Col4</td>
  </tr>

  <tr [b]id='[URL unfurl="true"]http://www.amazon.com'[/URL][/b]>
    <td>Row2 Col1</td>
    <td>Row2 Col2</td>
    <td>Row2 Col3</td>
    <td>Row2 Col4</td>
  </tr>

  <tr [b]id=''[/b]>
[b]<!-- with id='', onclick does nothing -->[/b]
    <td>Row3 Col1</td>
    <td>Row3 Col2</td>
    <td>Row3 Col3</td>
    <td>Row3 Col4</td>
  </tr>

  <tr>
[b]<!-- with NO id attribute, onclick does nothing -->[/b]
    <td>Row4 Col1</td>
    <td>Row4 Col2</td>
    <td>Row4 Col3</td>
    <td>Row4 Col4</td>
  </tr>
</table>
</body>
</html>

--Dave

london01 · Sep 3, 2004

Thanks everybody for your ideas and answers, they all workd!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Mouseover effect on table

london01

Technical User

cLFlaVA

Programmer

LFI

Programmer

LFI

Programmer

london01

Technical User

Similar threads

Part and Inventory Search

Sponsor