How to Manipulate Text Effects in Response to Mouse Events

Some Dynamic HTML effects require minimal scripting to attain. One such effect, activating text in response to mouse events, is achieved largely through the use of cascading style sheets (CSS) rules and the className property. Creating text effects in this manner yields ease of maintenance and succinct code.

Use CSS styles to generate the default appearance of the document.
Create the default look by setting styles on the highest level container feasible. In this case, the BODY element is the best choice. Where the design involves more variation, setting styles on lower-level containers, such as DIV, might better fit your needs. Elements in your document inherit the style attributes set at the parent container level. When animating text, for example, set the default font characteristics on the BODY element in the style sheet.
The following example demonstrates two ways of denoting style information within the STYLE object. The first technique consists of listing the full CSS attribute name, such as background-color. The second consists of giving the composite attribute name and listing multiple values after it. A composite attribute encompasses multiple properties. For instance, you can use the attribute background to set the value for any specific background attribute, such as background-color, background-image, and background-attachment. In the example below, values for font-size and font-family are set in a space-delimited list following the property name font. Assigning values in this manner can save development time.
```
<STYLE>
BODY  {  background-color: black;color: gold;font: 24pt sans-serif; }
</STYLE>
```
Create a style rule for activated text.
Decide on the font characteristics you want to have signify highlighted text. Next, make a CSS rule. A CSS rule consists of a selector and a style declaration. The following example demonstrates how to apply a style to a specific group of elements. The rule consists of the selector, UL.ActivateTextEffect, and the style declaration, { color: orange;letter-spacing: 2; }. Translated this means that all UL tags of the class ActivateTextEffect will receive the style values specified within the curly braces. The dot syntax in the sample below (UL.ActivateTextEffect) indicates that ActivateTextEffect is a subset of all UL tags. This style syntax is applicable to any element type. Style rules make it easy to alter multiple CSS attributes simultaneously and to maintain them in a single location.
```
<STYLE>
BODY  {  background-color: black;color: gold;font: 24pt sans-serif; }
UL.ActivateTextEffect  {  color: orange;letter-spacing: 2; }
</STYLE>
```
Add a call to the CSS rule into the appropriate tags.
Determine what event should effect the style change. In this case, the onmouseover event is the most intuitive catalyst for activating text. Add the event name into the element tag, then access the CSS class through the className property in the ensuing code. The example uses "this.className", which is simply a more generic technique for calling the element.
The corresponding event, onmouseout, is the logical candidate for restoring the text to the document default settings. Restore default settings by setting the className for the element equal to a string containing a semicolon.
Finally, copy and paste the event code to all the UL headings, or whatever tags you want to draw attention to. Remember that JScript® (compatible with ECMA 262 language specification) is case-sensitive, even when the code is located within HTML tags.
```
<BODY>
<UL onmouseover = "this.className = 'ActivateTextEffect'"
    onmouseout = "this.className = ';'">Part I: Dynamic HTML Text Features
</UL>
</BODY>
```
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

The following links provide more information on dynamically changing CSS attributes.

Changing Element Styles