asked on

Changing table properties with JavaScript

I've made a small table in a html page:

<html><head>
<title>Test</title>
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table cellSpacing=0 cellPadding=2 width=180 border=0 class="tableLayout">
<tr><td>Menu 1</td></tr>
<tr><td>Menu 2</td></tr>
<tr><td>Menu 3</td></tr>
</table>
</body></html>

The table has a backgroundcolor and a small solid border.
Now I would like to create the following effect. When I move the mouse over a cell, the backgroundcolor and bordercolor of that cell has to change. I know how to do it with CSS, but it has to be done width JavaScipt.

I think it should look something like this:
<td onMouseOver="changeLayout();" ...>

Can somebody help how to change html and css elements using JavaScript?

The ideal result I hope to get is something like the left menu on the Microsoft website (http://www.microsoft.com)

edemcs

I'm not sure how to do it with Javascript, and I know you said you know how to do it using css, but if you haven't thought of this method before, here it is. Good luck

function changerow(objRow,color)
{
objRow.style.backgroundColor=color;
}

<TR BGColor="FFFFFF" OnMouseOver="changerow(this,'eeea88');" OnMouseOut="changerow(this,'FFFFFF');">

edemcs

COBOLdinosaur

<html>
<head>
<title> cell changer </title>
<style>

</style>
<script language="JavaScript">

</script>
</head>
<body>
<table border=5>
<tr>
<td width=150 height=60 align="center" valign="middle"
class="white"
onMouseover="chgcell(this,'green')"
onMouseout="chgcell(this,'white')">
this is the first cell
</td>

<td width=150 height=60 align="center" valign="middle"
class="white"
onMouseover="chgcell(this,'green')"
onMouseout="chgcell(this,'white')">
this is the second cell
</td>
<td width=150 height=60 align="center" valign="middle"
class="white"
onMouseover="chgcell(this,'green')"
onMouseout="chgcell(this,'white')">
this is the third cell
</td>

<td width=150 height=60 align="center" valign="middle"
class="white"
onMouseover="chgcell(this,'green')"
onMouseout="chgcell(this,'white')">
this is the fourth cell
</td>
</tr>
<tr>
<td width=150 height=60 align="center" valign="middle"
class="white"
onMouseover="chgcell(this,'green')"
onMouseout="chgcell(this,'white')">
this is the fifth cell
</td>

<td width=150 height=60 align="center" valign="middle"
class="white"
onMouseover="chgcell(this,'green')"
onMouseout="chgcell(this,'white')">
this is the sixth cell
<br>
<a href="blah.gif" class="specialA"> this is a link </a>
</td>
<td width=150 height=60 align="center" valign="middle"
class="white"
onMouseover="chgcell(this,'green')"
onMouseout="chgcell(this,'white')">
this is the seventh cell
</td>

<td width=150 height=60 align="center" valign="middle"
class="white"
onMouseover="chgcell(this,'green')"
onMouseout="chgcell(this,'white')">
this is the eighth cell
</td>
</tr>
<tr>
</table>
</body>
</html>

edemcs

first of all, sorry about all of the posts, I must have refreshed the screen to many times. My method does work on Netscape 6 and IE.

StievieD

ASKER

edemcs Your solution works really great. I still have a single question.

In your solution you use 'objRow.style.backgroundColor' Which other options can I use behind 'style.' What can use for example to change the border size and color also?

I ask this because the words used in JavaScript and CSS are not the same. Example: CSS=background-color <=> JavaScript=backgroundColor.

Have you got a list or something of the thing I can change with 'style.'?

ASKER CERTIFIED SOLUTION

edemcs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

edemcs

StevieD, no A??!!! :) Thanks.

edemcs

StevieD, no A??!!! :) Thanks.