TechNote (Archived)

Changing the color of text

You may want particular text on your Web page to change color when site visitors mouse over it. Text cannot respond to mouse events, however. By using rollover images, CSS styles, dynamic styles, Flash text, or dynamic layers, you can give the appearance of text which changes appearance when rolled over with the mouse. Using rollover images is the most common and easiest method among the following:

Rollover images
Work for both Internet Explorer and Netscape.
CSS styles
Changing the appearance (including color) of text on mouseover using the hover pseudo-class (for Internet Explorer 4.0 and above and Netscape 6). For more information about this method, see Using the a:hover feature in CSS (TechNote 15679).
Dynamic Styles
This technique works for Internet Explorer 4.0 (and above) and Netscape 6.
Flash Text
To display Flash content, browsers need the Flash player. The Flash player is available as both a Netscape Navigator plugin and an Active X control for Microsoft Explorer on the PC, and it is incorporated in the latest versions of Netscape Navigator, Microsoft Windows, and America Online.
Dynamic Layers
This option works in both Microsoft Internet Explorer 4 and Netscape 4 (and above for both browsers).

Rollover images

A rollover image is an image that changes when the mouse moves across it. You can bypass manipulating text (and increase browser compatibility) by creating a rollover image of text in Dreamweaver, as follows:

Create in an graphics program, such as Fireworks or FreeHand, two Web images of text. Both image files should have the same height and width. The text on each image would probably be the same except for the color of the text, although you may prefer other variations.
Export or copy the image files into your already defined site. To define a site, see How to define a site in Dreamweaver(TechNote 14028).
In a previously saved Dreamweaver document, click in the Document window where you want to create the rollover image.
Choose Insert > Interactive Images > Rollover Image. This opens the Insert Rollover Image dialog box (see Example 1).
In the Image Name text box, type a name for the image.
Click Browse to the right of Original Image to select the image to appear before a mouseover movement.
Click Browse to the right of Rollover Image to select the image to appear during a mouseover event.
If you want the images preloaded in the browser's cache so they load faster, select the Preload Images option.
For the When Clicked, Go To URL option, click Browser to select the file, or type the path to the file you want to open when a user clicks the rollover image.
Click OK.
See Example 2 for a working demonstration of this method.

Dynamic Styles

You can also modify the HTML source code to create a rollover-color for instances of text. This technique (sometimes called "dynamic styles") is supported by Microsoft Internet Explorer version 4 and later, as well as Netscape 6. Follow these steps to change your HTML source code:

Type text in a Dreamweaver document and select a font and font color for the text. Make other font selections as needed.
Select the text and on the Property inspector select a font and font color for the text.
Note the hexadecimal number for the font color on the Property inspector.
Switch the window's focus to Code view or launch the Code inspector (choose Window > Code inspector).
In the font tag, add the following code:

onMouseOver="this.style.color='#FF0000'" onMouseOut="this.style.color = '#00BB00'"
Your placement of the code should look similar to the HTML code in Example 3.
For the static color (the green text in the code example above), substitute the hexadecimal number you noted in step 2 above.
For the rollover color (the red text in the code example above), substitute the hexadecimal number for color you wish.
Your text should change colors on mouseover, similarly to this example:

The wonders of dynamic styles!

Note: If you wish to make the text a link, be sure the<a> tags are outside of the<font> tags (see Example 4). Also, if you wish to remove the underline in the link, you can type the following in the <font> tag:

Your HTML code for linked, color-changing text without an underline should look similar to Example 5.

Flash text objects

The Flash text objects lets you create and insert a Flash movie that contains just text. That allows you to create a small, vector-graphic movie with the designer fonts and the text of your choice, as follows:

With the Document window in Design view, choose Insert > Interactive Images > Flash Text. The Insert Flash Text dialog box appears (see Example 6).
Complete the settings in the Flash Text dialog box. (For more information about these settings, see the Inserting Media chapter in the manual, Using Dreamweaver.)
Click OK.
See Example 7 for a working demonstration of this method.

Dynamic Layers

For these steps, you should already be familiar with layers, tables, Custom Style Sheets, and the Show-Hide Layers action on the Behaviors panel.

Choose Insert > Layer.
Choose Insert > Table.
In the Insert Table window type 1 for number of Rows, 1 for number of columns, enter 0 (zero) for cell spacing, padding and border. Choose Pixels from the Width pop-up menu and leave the default number for the width. Select OK.
Expand the width of the table to match the width of the layer.

Note: A fixed width table is created inside the layer to avoid the shifting of text when the Netscape browser window is resized. For additional information about this problem, please refer to Layer locations are displaced when the Netscape 4.x browser window is resized (TechNote 13141).
Type some text in the table and make it a hyperlink. For example "RolloverMe" with a link to #.
Select the layer and choose Edit>Copy.
Deselect the first layer by clicking outside of the layer into a blank area of the page.
Choose Edit>Paste.
There are now two layers with text on the page.

Note: If there is only one layer, the Paste command replaced the original. Remember to deselect the first layer before pasting.
Choose Window > Layers. In the Layers panel name each layer.
For example name one layer "textStatic", and the other "textRollover."
Using the "Layer" window, change the Z index of layer "textRollover" to a number greater than layer "textStatic." For example set the Z index of layer "textRollover" to 2 when the Z index of layer "textStatic" is 1.
Choose Window > Styles and click the Style Sheet button. Click the New button, then in the New Style window, select Make Custom Style (class). Name the style. For this example, name the style "overStyle." (Dreamweaver automatically adds the period in front of the style name.)

In the Type Category select a color (this will be the color you want the text to be when the mouse is over the text), and set the decoration to "none".

Click OK and then click done.

Note: Setting the Type Decoration to none in the style sheet turns off the underline of the anchor tag. Also, you may wish to include other attributes as part of your style, such as font and size, however, this is optional.
Repeat step 11 to create a second style sheet. Name it "staticStyle." Use the same font and font size, but use a different color. Set the decoration to "none."
Using the Eye feature in the "Layer" window, turn off layer "textStatic." Layer "textRollover" should be the only visible layer.
Select the text inside the "textRollover " layer and choose Text > Custom Style > overStyle to apply this custom style to the text.

Note: You can easily select the anchor tag by clicking your mouse on the <a>, within the tag selector, on the bottom left corner of the main Dreamweaver document window.
With the anchor tag still selected, choose Window > Behaviors. Be sure "Events for 4.0 Browsers" is selected. Click the plus button and select Show-Hide Layers from the pop-up menu. Set the layers to hide layer "textRollover," and show layer "textStatic."

Click the down arrow to the right of onClick and select onMouseOut.
Using the Eye feature of the "Layer" window, turn off layer "textRollover,"and turn on layer "textStatic." Layer "textStatic" should be the only visible layer in the document window.
Select the text inside the "textStatic" layer and choose Text>Custom Style>staticStyle to apply this custom style to the text.
With the anchor tag still selected, choose Window > Behaviors. Select the plus button and Show-Hide Layers from the pop-up menu. Set the layers to hide layer "textStatic," and show layer "textRollover".

Click the down arrow to the right of onClick and and Select onMouseOver.
Align the two layers by selecting both layers in the layers palette and choosing Modify > Layers and select "Align Top," then repeat selecting "Align Left."
Using the Eye feature in the "Layer" window, turn on textStatic layer (indicated by the open eye), and turn off the textRollover layer (indicated by the closed eye).
Preview in a browser.