Creating Movement on the Screen | Dynamic HTML in Action

Dynamic styles allows you to precisely position objects at specific locations on the screen. By changing the properties that specify location, the objects can be moved, as demonstrated in Code Listing 15-4. Figure 15-9 below shows the initial display in the Internet Explorer window. Moving the mouse on the screen causes the SPAN elements to move around on the page; Figure 15-10 presents only one possible state. (The dynamic movement that this code creates on the Web page is difficult to represent in an illustration. To appreciate what this code does, run chap15\lst15-4.htm on the companion CD.)

Code Listing 15-4.

 <HTML> <HEAD> <TITLE>Listing 15-4</TITLE> <STYLE>SPAN {position:absolute}</STYLE> <SCRIPT LANGUAGE="JavaScript"> function moveSpans(){   Span1.style.top=15   Span2.style.posTop=Span2.style.posTop+1   Span3.style.left=10   Span4.style.top=window.event.y   Span5.style.posLeft=window.event.x   Span6.style.pixelTop=window.event.x   Span6.style.posLeft=window.event.y } </SCRIPT> </HEAD> <BODY onmousemove="moveSpans()"> <SPAN ID="Span1" STYLE="top: 0; left: 0">First Span</SPAN> <SPAN ID="Span2" STYLE="top: 50; left: 50">Second Span</SPAN> <SPAN ID="Span3" STYLE="top: 100; left: 100">Third Span</SPAN> <SPAN ID="Span4" STYLE="top: 150; left: 150">Fourth Span</SPAN> <SPAN ID="Span5" STYLE="top: 200; left: 200">Fifth Span</SPAN> <SPAN ID="Span6" STYLE="top: 250; left: 250">Sixth Span</SPAN> </BODY> </HTML>

click to view at full size.

Figure 15-9. The Web page before the user moves the mouse.

click to view at full size.

Figure 15-10. One possible example of a Web page after the user moves the mouse.

Code Listing 15-4 shows the effect of changing the properties that control the position of an element. All the SPAN elements on the page have their position property set to absolute, which allows us to specify exact pixel locations for their initial positions. To set these locations, we used the top and left properties.

NOTE
You can use many different properties to specify position—top, posTop, pixelTop, left, and posLeft, to name a few. Each property is useful in particular situations. You can find a full description of these properties on the SBN Workshop Web site and on the CD that accompanies this book. On the CD, go to Workshop (References); DHTML, HTML & CSS; CSS, and then CSS Attributes Reference. To get to the online version, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD and choose CSS Attributes Reference.

The BODY element in Code Listing 15-4 has an onmousemove event handler, which calls the moveSpans function every time the mouse moves over the body region or, in other words, every time the mouse moves anywhere on the page. This function specifies how the position of each SPAN element should change as the mouse moves. Span1 moves vertically to a location 15 pixels from the top of the screen and then stays there. As the mouse moves, Span2 constantly drops to a location 1 pixel lower (because the value of its posTop property is being incremented by 1 for each pixel that the mouse moves, in any direction). Span3 moves horizontally to a location 10 pixels from the left of the screen and remains there. (To return the window to its initial state, press the F5 key.) Because Netscape Navigator 4 does not support the onmousemove event handler on the BODY element, it never calls the moveSpans function or attempts to change an element's position on the screen.

The next three SPAN elements change their positions relative to the position of the mouse. The window.event.x and window.event.y properties specify the current mouse position. Span4 moves vertically when the mouse moves vertically, while Span5 matches the horizontal moves of the mouse. Span6 moves vertically as the mouse moves horizontally, and it moves horizontally as the mouse moves vertically, which can lead to interesting behavior when the mouse is moved in circles.

An example of how dynamic styles can create changing movement on the screen can be found on the SBN Workshop Web site and on the companion CD in the folder workshop\author\dhtml\tutorial\asteroids\asteroids.htm. In roughly 600 lines of code, this example uses only dynamic styles, script, and a few images to create a fully functional version of the old arcade game Asteroids. Check it out—you will be impressed.

As you have seen in the past several chapters, dynamic styles lets you change everything from the color of text to the position of an element simply by changing conventional CSS attributes. The next chapters present additional ways to create exciting Web pages with multimedia and animations.