Hover changes background color of cell

spyder · Dec 6, 2001

Well, I've scrolled through what others have said about this, and haven't been able to decipher what I need to know.

I want to change the background color of table cells (in a navigation bar) as they are hovered over. I am familiar with HTML and CSS, but not Javascript.

How do I do this? Could you tell me what should go in the STYLE tag and the TABLE tag?

Thanks.

Boomerang · Dec 6, 2001

Hi spyder.

There are many solutions. This is only one:
(I thought it's IE only, didn't test it)

<script language="JavaScript" type="text/javascript">
function highlight(cell)
{
cell.bgColor = '#ffff00';
}

function normal(cell)
{
cell.bgColor = '';
}
</script>

<td onmouseover="highlight(this)" onmouseout="normal(this)">

Joyrex · Dec 6, 2001

I might be mistaken, but I think you can do this with DIVS. Since DIVS work well in both netscape and IE, perhaps looking into this might be a good idea. ----------------------------------------
"I got a fevah... and the only prescription is more cowbell!"

romannl · Dec 8, 2001

Try to find something you like here!

http://www.cgiscript.net/site_javascripts_mouse_tricks.htm

aob982 · Dec 10, 2001

Hi there,

Try this even...

<html>

<head>
<title>Cell Colours</title>
</head>

<body>

<table border="1" width="100%">
<tr>
<td width="33%" onMouseover="style.backgroundColor='red'"
onMouseout="style.backgroundColor='blue'" bgcolor="blue">cell</td>
<td width="33%" onMouseover="style.backgroundColor='green'"
onMouseout="style.backgroundColor='yellow'" bgcolor="yellow">cell</td>
<td width="34%" onMouseover="style.backgroundColor='orange'"
onMouseout="style.backgroundColor='purple'" bgcolor="purple">cell</td>
</tr>
</table>
</body>
</html>

<!--

) -->

spyder · Dec 11, 2001

Wow. Thanks everyone. You gave me great info, and it works!

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!

Hover changes background color of cell

spyder

Technical User

Boomerang

Programmer

Joyrex

Technical User

romannl

Programmer

aob982

Technical User

spyder

Technical User

Similar threads

Part and Inventory Search

Sponsor