Now, that's really all we're going to talk about for now on rewriting contents of a layer. Instead, let's look at a script to change the display of something on mouseover using the "this" keyword).

If you mouse over this button, you'll notice a color change. This results from the following code:

<input type="button" value="Button" style="color:#2312fa" onmouseover="this.style.color='#da45a3'" onmouseout="this.style.color='#2312fa'">

The "this" keyword refers the the input button as an object. So, we can then access its CSS styles and then, it's CSS color attribute. Note that this works only in IE 4 and NS 6 (not NS 4...surprise). So, for NS 4, we could change the input button's color with (just without the ".style" syntax as normal...):

<input type="button" value="Button" style="color:#2312fa" onmouseover="this.color='#da45a3'" onmouseout="this.color='#2312fa'">

WRONG! First of all, NS 4 doesn't support the CSS color style in input buttons, but even if it did, it wouldn't work because Netscape 4 won't change the display of static (not absolutely positioned) elements (atleast for now...).

Also, using this.className, we could have changed the whole class in a similar fashion. For example:

<input type="button" value="Button" class="button1" onmouseover="this.className='button2'" onmouseout="this.className='button1'">

Statically Positioned Elements

Let's quickly move on to another, rather broad topic: statically positioned elements. In IE 4+ and NS 6 (not in Netscape 4), you can change almost any element, from <p> tags to the already discussed <div> tag. Here's an example that should work in the non-archaic browsers using the <p> tag:

Mouse Me Over!

This can be accomplished with the following code:
<p onmouseover="this.innerHTML='You did it!'" onmouseout="this.innerHTML='Mouse me Over!'">Mouse me Over!</p>

Later, we'll discuss how we can use dynamic statically positioned elements in Netscape 4. But first, let's discuss a common pitfall in (you guessed it) Netscape 4!

Next -->