Changing Formatting on the Fly (IE4+, NS6)

We can startle our viewers now by changing the look of our text in response to the viewer's actions. Changing the text itself is a different question.

Whatever changes we make are done through changing the STYLE of the text when something happens, like a mouse click or mouseover. This kind of change after a page has been rendered is supported by IE4 and later IE browsers and Netscape6. Under NC4 one can achieve the same effect only by using document.write in a JavaScript function. In other words, it's not nearly so easy!


Syntax & Examples:

These examples use the SPAN tag with the onMouseOver and onMouseOut events. You could use the same code with any text tag and any other event. Note that using stylesheets takes a lot less typing.

1. Code within the tag sets styling directly:
   (We'll only change 2 characteristics)

<span onMouseOver="this.style.color='yellow'; this.style.fontFamily='Wide Latin,Arial, Helvetica,sans-serif';" onMouseOut="this.style.fontFamily='Times New Roman,Times, serif'; this.style.color='black'">

      Try it: Move mouse here.


2. Code within the tag changes the CLASS:

<span class=start onMouseOver="this.className='change'" onMouseOut="this.className='start'">

      Try it:    Move mouse here.


3. Call function with event:

<span id="here" class=start onMouseOver="myChanges()" onMouseOut="myChangeBack()">

where the two functions are defined in the SCRIPT below:

<script>
<!--
function myChanges()
{here.className='change';}

function myChangeBack()
{here.className='start';}
-->
</script>

      Try it:    Move your mouse here.

Note: Netscape6 fails on this one. It's document model is different and so would need different statements in the script.

Syntax note: We gave the SPAN tag the name "here" using ID so we could refer to it in the functions. A very useful capacity!


© 1997-2002 Jan Smith   <jegs1@jegsworks.com>