Re: any cell change color

#1

JimsNews wrote on 03 aug 2003 in comp.lang.javascript:

Quote:

Using mouseover mouseout I want to be able to change cell bgcolors.
Example: A table with 3 rows and 2 columuns...

r1c1 r1c2
r2c1 r2c2
r3c1 r3c2

Example: I want r1c1, r2c1 and r2c2 bgcolor to all change to same
bgcolor when mouse is over any one of...
r1c1, r2c1 or r2c2

===================

<head>
<style id="TableStyle">
.r1 {background-color:;}
.r2 {background-color:;}
td {font-size:50pt;padding:40px;}
</style>

<script>
TableStyle.r1=document.styleSheets.TableStyle.rule s[0].style;
TableStyle.r2=document.styleSheets.TableStyle.rule s[1].style;

function over(x) {
cnme=x.className
TableStyle[cnme].backgroundColor='yellow';
}
function out(x) {
cnme=x.className
TableStyle[cnme].backgroundColor='';
}
</script>

</head><body>

<table id=t1 border=10><tr>
<td class=r1
onmouseover=over(this)
onmouseout=out(this)>
r1c1
</td>
<td class=r2
onmouseover=over(this)
onmouseout=out(this)>
r2c1
</td>
</tr><tr>
<td class=r1
onmouseover=over(this)
onmouseout=out(this)>
r1c2
</td>
<td class=r2
onmouseover=over(this)
onmouseout=out(this)>
r2c2
</td></tr><tr>
<td class=r1
onmouseover=over(this)
onmouseout=out(this)>
r1c3
</td>
<td class=r2
onmouseover=over(this)
onmouseout=out(this)>
r2c3
</td>
</tr></table>

</body>

===================

IE6 tested

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Re: any cell change color

Javascript JavaScript language (comp.lang.javascript)

Re: any cell change color - 08-03-2003 , 03:27 AM