Blend IE and Netscape

Changing the background color of a table cell when the mouse moves over it is a fairly easy trick-- if you are just coding for one browser anyway. To make it work in both browsers, we have to add some extra tags and alter the commands a bit. The trick is getting everything together.

If you are using a version 4+ browser, move your mouse over the table cell below. It should turn yellow then yellowgreen:

Watch me get scared!

CSS with Internet Explorer

To get started, let's look at the way to do this in Internet Explorer. Basically, we just need to have a table and define a style sheet for the cell we want to change. Then we can change it using some properties that allow us access to the CSS attributes of the cell:

<TABLE width="200" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD style="width:100%; background-color:lightblue"
 onMouseover="this.style.backgroundColor='yellow';"
 onMouseout="this.style.backgroundColor='yellowgreen';">
Watch me get scared!
</TD>
</TR>
</TABLE>

Internet Explorer makes this easy by allowing the style attribute to work in a <TD> tag, as well as allowing the tag to use the onMouseover and onMouseout event handlers. Let's take a look at the what we added to the <TD> tag:

style="width:100%; background-color:lightblue"

We used the width of 100% to make sure the style included the entire width of the cell. The background color is set to light blue here.

onMouseover="this.style.backgroundColor='yellow';"

This is where the color of the cell is changed. We access the properties of the cell by using "this", meaning "this object". We then use the "style" to access the style sheet for that object. Now, we use a trick in Internet Explorer that allows us access to the specific style sheet property we are after.

In IE, you can take the name of a style property (in our case, background-color) and remove the dash, then capitalize the letter that came after the dash, which here gives us:

backgroundColor

You can do this for just about any CSS property in IE. After we have this, we just give the property a new color, and we chose yellow.

 
onMouseout="this.style.backgroundColor='yellowgreen';"

This works just like the onMouseover event, but it changes the color to yellowgreen - I could have put light blue to go back to the original colour. Different colours convince us the code is working in the way we expected.

How About Netscape?

Now the tricky part, can we get this to work with Netscape? Well, Netscape 4 doesn't do well with the background properties, and doesn't let the trick that works for IE, access the property. Also, it won't allow the onMouseover or onMouseout events in a <TD> tag. So, to get this in NS4, we have to use the Netscape Layers, which will allow us to do many of the same things.

The <LAYER> tag will allow the background color to be set and this tag allows the mouse events in NS. The problem with this is that it likes to be positioned with absolute positioning. The way around that problem is to surround the <LAYER> tags with <ILAYER> tags. ILAYER stands for an "Inline Layer", meaning it will show up where it is placed, and doesn't need to be positioned with the top and left properties.

Now, let's look at the cross-browser code. We'll have some more explanation afterward:

<TABLE width="200" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD style="width:100%; background-color:lightblue"
 onMouseover="this.style.backgroundColor='yellow';"
 onMouseout="this.style.backgroundColor='yellowgreen';">
<ILAYER>
<LAYER ID="la2" bgColor="lightblue" width="100%"
 onMouseover="this.bgColor='yellow';"
 onMouseout="this.bgColor='yellowgreen';">
This is cool.
</LAYER>
</ILAYER>
</TD>
</TR>
</TABLE>

Notice the Layer tags inside the TD tags. The Layer tags are just ignored by IE, so these just allow NS to do it's work. Since NS ignores the mouse events in the TD tag, it just picks them up in the LAYER tag. Also notice how the LAYER tag takes on the attributes separately. We set the width to 100% like we did the table in IE. Also, we set the background color to light blue. Here the background color is set and changed with the bgColor property, which is a bit different to the method in IE. Also, we don't need to access the style, just "this.bgColor".

More than one Cell? No worries.

<style> 
.plain {font-family: verdana,arial; 
	font-size: 12pt; } 
</style> 

<table border="0" cellspacing="1" cellpadding="0">
<TR><TD bgcolor="black">.<P></TD>
<td bgcolor="#ffcc00" onmouseover="this.bgColor='#ffff33';"
	onmouseout="this.bgColor='#33ff33';"> 
<ilayer><layer onmouseover="this.bgColor='#ffff33';"
	onmouseout="this.bgColor='#33ff33';">
&nbsp; &nbsp; 
<a href="linkhere.html" class="plain">link number one</a>
&nbsp; &nbsp; 
</layer></ilayer> 
</td> 
<td bgcolor="#ccff00" onmouseover="this.bgColor='#ff99ff';" 
	onmouseout="this.bgColor='#99ccff';"> 
<ilayer><layer onmouseover="this.bgColor='#ff99ff';"
	onmouseout="this.bgColor='#99ccff';">
&nbsp; &nbsp; 
<a href="linkthere.html" class="plain">link number two</a>
&nbsp; &nbsp; 
</layer></ilayer> 
</td></tr></table> 

.

link number one

link number two