MouseOver - Background color,  마우스오버시 백그라운드 컬러지정

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:

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='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.

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='lightblue';">
<ILAYER>
<LAYER ID="la2" bgColor="lightblue" width="100%"
 onMouseover="this.bgColor='yellow';"
 onMouseout="this.bgColor='lightblue';">
This is cool.
</LAYER>
</ILAYER>
</TD>
</TR>
</TABLE>

Notice how we just tossed 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. Notice that here the background color is set and changed with the bgColor property, which is a bit different than the method in IE. Also, we don't need to access the style, just "this.bgColor".

More than one Cell?

We can write a little script to shorten the inline code a bit and allow it to work over multiple cells and even use different colors. However, we could only get it to work with IE (anyone with some code for NS send it along). Here is the script:

<SCRIPT language="JavaScript">
<!--
function bcolor(bcol,d_name)
{
if (document.all)
{
 var thestyle= eval ('document.all.'+d_name+'.style');
 thestyle.backgroundColor=bcol;
 }
}
//-->
</SCRIPT>

The script takes two parameters. One is the color to change to, the second is the ID name of the TD tag. Be sure to give all the TD tags a different ID and to call the script with the right ID for each TD tag. Here is a sample where we change on cell to yellow and another to red. This will show how to call the function:

<TABLE width="200" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD ID="td1" style="width:50%; background-color:lightblue"
 onMouseover="bcolor('yellow','td1');"
 onMouseout="bcolor('lightblue','td1');">
This goes to Yellow
</TD>
<TD ID="td2" style="width:50%; background-color:lightblue"
 onMouseover="bcolor('red','td2');"
 onMouseout="bcolor('lightblue','td2');">
This goes to Red
</TD>
</TR>
</TABLE>

If you have IE, try it out below. One turns to yellow, the other to red:

In this way, you could have all sorts of color changing cells. However, it is probably best used to have a set of cells that all do the same thing, while another set does another.

Well, that is all for now, have fun with your backgrounds!