TD Rollovers !!

[wap3]

Hi people,

I am using the following code to change the background color of a table cell:

onMouseover=this.style.backgroundColor="#99CCFF"

What I was wondering is can a create a script which can be placed in an external .js file which will change the background. It being called by something like this:

onMouseover="rollover('#99CCFF')"

Any ideas ??

Thanks:thumbsup:

[requestcode]

You could create a function like this:
function chgtabcolor(name,bcolor)
{
if(document.getElementById)
{
elm=document.getElementById(name.id)
elm.style.backgroundColor=bcolor
}
}

and then call it like this:
onMouseOver="chgtabcolor(this,'lightgreen')" onMouseOut="chgtabcolor(this,'white')"

[premshree]

You can define a stylesheet and use :


<td onMouseover="this.className='moStyle'" onMouseout="this.className='normStyle'">.........</td>

[wap3]

Thanks guys

I have got a solution from your two suggestions now.

Thanks

:thumbsup:

[beetle]

Much better to do it this way (I think...)<script language="javascript" type="text/javascript">
function hilite(e) {
var o = (document.all) ? e.srcElement : e.target;
if (o.nodeName == "TD")
// Any style or class changes
}

function restore(e) {
var o = (document.all) ? e.srcElement : e.target;
if (o.nodeName == "TD")
// Any style or class changes
}

</script>

<table onMouseOver="hilite(event)" onMouseOut="restore(event);" width="500" border="1">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td>
</tr>
</table> As you can see, this maked the table flexible, so that we could have a separate rollover effect for TH cells. Works with IE and NS (gecko) And this way, you don't have to attach all the events to EVERY table cell.