Links

Using dynamic styles, you can also change the style of the different states of a hypertext link, which is defined by the anchor tag, <A>. The anchor tag differs slightly from most other tags in that it has four states, called pseudoclasses. The four pseudoclasses are described here:

Pseudoclass State Default Appearance
link The link has not been visited. Blue with underline
visited The link has been visited. Purple with underline
hover The mouse is resting over the link. Blue with underline
active The mouse is clicking the link. Blue with underline

All of these pseudoclasses are available in Internet Explorer. Only link and visited work inside current versions of Netscape Navigator.

When you create a style sheet, you can modify the style of a pseudoclass by separating the pseudoclass name from the anchor tag with a colon, as shown here:

 A:link {color: yellow} A:visited {color: red} A:hover {color: green} A:active {color: blue} 

Code Listing 11-13 demonstrates how these pseudoclasses can be used to create a simple text rollover effect in Internet Explorer.

Code Listing 11-13.

 <HTML> <HEAD> <TITLE>Listing 11-13</TITLE> <STYLE>   A:link {text-decoration: none}   A:hover {color: red; text-decoration: underline} </STYLE> </HEAD> <BODY> <A HREF="http://msdn.microsoft.com">msdn.microsoft.com</A><BR> <A HREF="http://microsoft.com">microsoft.com</A><BR> <A HREF="http://www.w3.org/style/">www.w3.org/style</A><BR> <A HREF="http://www.w3.org">www.w3.org</A><BR> </BODY> </HTML> 

click to view at full size.

Figure 11-13. A link is highlighted and underlined when the mouse goes over it.

The first style (A:link) is used to set the normal appearance of links on the page. Setting text-decoration to none removes the underline from links on the page. When the user moves the mouse over a link, it enters the hover state and the style specified for A:hover takes effect, underlining the link and changing it to red.

NOTE
Generally, removing underlines from normal in-line hyperlinks is not recommended. Usability studies have shown that end users commonly interpret an underline below text as an indication that the text is a hyperlink. A lack of underlining can lead users to think that a link is not in fact a link. This effect is not as bad in the case of a menu of links—for example, in a left-hand menu navigation bar. Changing a link to boldface on mouseover is not recommended either because this changes the width of the text and might cause the page to reflow.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net