Dynamically Changing Backgrounds

Changing backgrounds with CSS isn’t too difficult to do, but browser compatibility is an issue. “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=’lightblue’;”>
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”

This is the style we will use for the cell. 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, we may cover that in more detail in a separate section soon. After we have this, we just give the property a new color, and we chose yellow.

onMouseout=”this.style.backgroundColor=’lightblue’;”

This works just like the onMouseover event, but it changes the color back to light blue.”

Read the full article from Page Resource. Information for Netscape and multiple cells are also included in this informational article.