Dynamic Styles


Styles have become more important as time has gone on (we'll cover working with styles in Chapter 21, "Cascading Style Sheets and CGI Programming"), now even replacing the beloved HTML <CENTER> element (according to W3C, you're supposed to center elements with styles starting with HTML 4), and, in many ways, the Netscape <LAYER> element we'll see later in this chapter.

Using the style property, you can change the appearance of a page at runtime in browsers such as IE4+ and NS6+; you also can position elements on-the-fly . Here's an example showing how to create text mouse rollovers (also see graphic mouse rollovers in Chapter 15, "Working with the Mouse, Keyboard, and Images"). In this case, the code makes some text bigger when the mouse rolls over it:

(Listing 16-02.html on the web site)
 <HTML>      <HEAD>          <TITLE>              Text Mouse Rollovers          </TITLE>      </HEAD>      <BODY>          <CENTER>              <H1>                  Text Mouse Rollovers              </H1>  <SPAN ONMOUSEOVER="this.style.fontSize='48'"   ONMOUSEOUT="this.style.fontSize='12'"   STYLE="fontSize:36">   This text gets big when the mouse is over it.   </SPAN>  </CENTER>      </BODY>  </HTML> 

You can see the results in Figure 16.1.

Figure 16.1. Using dynamic styles to make text big.

graphics/16fig01.gif

Making text grow was probably the most common use for dynamic styles with mouse rollovers early on, but it's a little disconcerting to see text grow and squirm around in reaction to mouse movements. More recently, web pages are just changing the color of text when the mouse moves over that text. Here's an example that changes the color of text to red when the mouse moves over it (you'll need version 6+ if you're using Netscape Navigator):

(Listing 16-03.html on the web site)
 <HTML>      <HEAD>          <TITLE>              Text Mouse Rollovers          </TITLE>      </HEAD>      <BODY>          <CENTER>              <H1>                  Text Mouse Rollovers              </H1>  <SPAN ONMOUSEOVER="this.style.color='red'"   ONMOUSEOUT="this.style.color='black'">   This text changes color when the mouse is over it.   </SPAN>  </CENTER>      </BODY>  </HTML> 

You can see the results in Figure 16.2, in glorious black and white (although the text really is red).

Figure 16.2. Using dynamic styles to change text color.

graphics/16fig02.gif

You also can use styles to position elements at runtime to make your web pages come alive ; see "Moving Images" in Chapter 15 for examples, including a mouse trail example where a trail of stars follows the mouse as you move it around.



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

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