9.1 An introduction to moving objects

9.1 An introduction to moving objects

Programming moving objects on the Web is the art of combining various Web technologies. It is the first step toward the goal of creating sophisticated dynamic pages. In general, we consider an XHTML page as dynamic if its content contains dynamic programming or features. Under this broad definition, almost all examples and XHTML pages in this book are dynamic. Moving objects are certainly one of them. Some people may see the contents of this chapter more as Dynamic HTML (DHTML). Since DHTML is not a standard defined by the W3C authority or anyone else, we don't want to create yet another keyword here. Instead our discussion will concentrate on the construction of moving objects and how to program them.

The term object in this chapter represents any XHTML entity including texts and/or images displayable on a Web page. To many of us, programming moving objects is a combination, and practical use, of the

• Extensible Hyper Text Markup Language (XHTML)

• Cascading Style Sheet (CSS)

• Document Object Model (DOM)

• European Computer Manufacturers Association Script (ECMAScript)

XHTML provides a rich set of tools and methods for you to create instant documents and objects on the Web. With CSS, you can organize and manipulate the positions and properties as well as styles of an XHTML page. With the DOM, you can have a full picture of a Web page and a vital link between the scripting language and page elements. For example, you can use the DOM function getElementById() to access all XHTML elements. By using ECMAScript, you can access and manipulate objects and elements in a page in real time via the DOM. By combining all these technologies together, you have endless possibilities to create dynamic features on Web pages.

Before the detailed discussion on programming moving objects, a review of how to use the CSS positions is essential.

9.1.1 Positioning objects with CSS style

Along with the display, look, and formatting properties, another great strength of the CSS style is to provide position and accurate measurements on objects or entities defined on a page. For example, you can use the following CSS properties to define an object with position and dimension:

Listing: ex09-01.txt - Position Properties In CSS

 1: <div name="myObject" id="myObject"
 2:   style="position: absolute;
 3:          top: 40px;
 4:          left: 100px;
 5:          height: 50px;
 6:          width: 200px;
 7:          font-family: arial;
 8:          font-size: 18pt;
 9:          color:#ffff00;
10:          background:#000088">
11:  This is a paragraph located at 40 pixels from the top and 100 pixels
12:  from the left.
13: </div>

In this example, the division <div> element is used to define an object. In fact most XHTML elements with an identity and CSS capabilities can also be used to define an object on the Web. In this case, the object is a paragraph with its own font family, font size, color, and background color (lines 710). The more interesting part of this example is the position properties defined in lines 26. The first position property

position: absolute;

instructs the browser to use an absolute measurement for all positions inside this object. Under absolute measurement, the top left corner of the browser screen has the coordinates (0, 0). That is, top=0px (pixel) and left=0px. The statements in lines 3 and 4

top:40px; left:100px;

define a location as (40, 100) pixels from the top left corner of the browser screen. The dimension statements in lines 5 and 6

height:50px; width:200px;

specify a rectangular area 50 x 200 (height x width) for the object, and thus all other CSS properties will be restricted and applied only to this area.

Note that px is used here to specify the measurement in pixels. Other scale units such as pt (points), in (inches), and cm (centimeters) can also be used.

The CSS position and dimension properties are the basic elements to define an object. As you will see in this chapter, you can use the basic position and dimension descriptions such as top, left, height, and width to create moving objects and dynamic pages.

To help understand how to program objects, we first consider a page with fixed objects. Then the motion is just a matter of changing their positions continuously. Consider the page

Example: ex09-01.htm - Object Positioning

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Object Positioning - ex09-01.htm </title></head>
 6: <body style="background:#000088;font-family:arial;font-size:28pt;
 7:   color:#ffff00;font-weight:bold;text-align:center">
 8: <div align="center">
 9:  Object Positioning with <br /> CSS Sheets</div>
10:
11:  <div name="myObj1" id="myObj1"
12:   style="position: absolute;
13:      top: 120px;
14:     left: 40px;
15:      height: 130px;
16:      width: 250px;
17:     background: #ffffff;
18:      color: #000000;
19:     font-size: 20px;
20:     font-family: Times">
21:   My first object is at<br />
22:     top: 120px <br /> left: 40px <br />
23:   height:130px <br /> width: 250px </div>
24:
25:  <div name="myObj2" id="myObj2"
26:   style="position: absolute;
27:     top: 350px;
28:     left: 400px;
29:     height: 160px;
30:     width: 290px;
31:     background: #ffff00;
32:     color: #880000;
33:     font-size: 24px;
34:     font-family: Times">
35:  My second object is at<br />
36:  top: 350px <br /> left: 440px <br />
37:  height:160px <br /> width: 290px</div>
38:
39:  <div name="myObj3" id="myObj3"
40:     style="position:      absolute;
41:     top: 180px;
42:     left: 330px;
43:     height: 140px;
44:     width: 200px;
45:     background:    #aaffaa;
46:     color: #880000;
47:     font-size:     24px;
48:     font-family:   Times">
49:   My Logo<br />
50:   <img src="logo_web.jpg" alt="pic" height="90" width="140" /></div>
51:
52: </div>
53: </body>
54: </html>

In this page, inline CSS is used to define three styles, with independent positions and dimensions. Each style specifies an object's properties. Object 1 with identity myObj1 is a paragraph and has a starting location at coordinates (120 ,40) pixels in (top, left) format. Object 2 is similar to object 1 but with different CSS settings. Object 3 contains an image with its own dimension control. The image logo_web.jpg is first rescaled into the dimension as defined in line 50 and then the entire object is restricted by the CSS settings. A screen shot of this page is given in Fig. 9.1.

You now have some static objects. To move them it is just a matter of changing their position continuously in real time.

9.1.2 Some moving texts

The central idea for moving objects is to manipulate the top and left properties of the CSS style. Due to proprietary features and various types of incompatibilities among browsers, Web programmers in the past have struggled to find a unified way to change the (top, left) coordinates of an object. Also it was no surprise to find that even different versions of the same browser could have some form of incompatibilities. Thanks to the standardization of the CSS, DOM, and W3C, it is now possible to develop more reliable and compatible Web applications as long as the standards are followed. The following example shows a page with moving texts. Since we follow standard recommendations, this page will work on all W3C-compliant browsers without the need for any detection. This page is listed in ex09-02.htm.

Example: ex09-02.htm - Some Moving Texts

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Some Moving Texts - ex0902.htm</title></head>
 6: <body style="background:#000088;font-family:arial;font-size:28pt;
 7:   color:#ffff00;font-weight:bold;text-align:center">
 8: <div align="center">Some Moving Texts <br /></div>
 9:
10:  <div name="myObj1" id="myObj1"
11:   style="position: absolute;
12:         top: 120px;
13:         left: 40px;
14:         height: 100px;
15:         width: 250px;
16:         background: #ffffff;
17:         color: #000000;
18:         font-size: 20px;
19:         font-family: Times">
20:   My first object has dimension<br />
21:   height: 100px <br /> width: 250px</div>
22:
23:  <div id="myObj2" id="myObj2"
24:   style="position: absolute;
25:         top: 280px;
26:         left: 200px;
27:         height: 100px;
28:         width: 290px;
29:         background: #ffff00;
30:         color: #880000;
31:         font-size: 24px;
32:         font-family: Times">
33:   My second object has dimension<br />
34:   height: 100px <br /> width: 290px</div>
35:
36: <script>
37: var ixDelta = 5
38: var iyDelta = 5
39: var lxPos = 0
40: var lyPos = 0
41:
42: function MoveLeft()
43: {
44:  lxPos = parseInt(document.getElementById("myObj1").style.left)+ixDelta
45:  if (lxPos >= 400 || lxPos < 0) ixDelta = ixDelta * -1
46:  document.getElementById("myObj1").style.left = lxPos + "px"
47: }
48:
49: function MoveUp()
50: {
51:  lyPos = parseInt(document.getElementById("myObj2").style.top)+iyDelta
52:  if (lyPos >= 320 || lyPos < 0) iyDelta = iyDelta * -1
53:  document.getElementById("myObj2").style.top = lyPos + "px"
54: }
55:
56: setInterval("MoveLeft();MoveUp()",50)
57: </script>
58: </body>
59: </html>

The two objects myObj1 and myObj2 are first defined in lines 1034. These two paragraphs of text have independent CSS positions and settings. The script section (lines 3657) contains two functions, MoveLeft() and MoveUp(). The first script function MoveLeft() moves the object myObj1 to the left and right. The second one moves the object myObj2 up and down. In order to make the texts move, you need to call these two functions continuously for a certain time interval. The function setInterval() in line 56 instructs the browser to call these two functions simultaneously every 50 milliseconds.

Consider the function MoveLeft() (i.e., move the object to the left and right-hand side):

function MoveLeft()
{
 lxPos = parseInt(document.getElementById("myObj1").style.left)+ixDelta
 if (lxPos >= 400 || lxPos < 0) ixDelta = ixDelta * -1
 document.getElementById("myObj1").style.left = lxPos + "px"
}

This function has only three lines. The first line is to get the left location of the object myObj1, increment by ixDelta, and assign the value to a local variable lxPos (i.e., local x-position). If this lxPos value is 400 or more, or alternatively less than 0, the sign of the increment ixDelta is changed so that the movement of the text changes direction. The final line of this function is to assign the value of lxPos to the left position of the object myObj1, so that new position can be updated.

According to the W3C standard, the position (top and left) and dimension (height and width) values should have a measurement unit attached to them. This is why the pixel unit "px" is added at the end of the function. Some browsers may perform the page and action correctly even without the pixel unit, but they are not W3C standard compliant. Some browsers such as NS6+ (NS6.0 and NS6.1) will not function correctly without them. Also, since the CSS value or data stored in the property document.getElementById("myObj1").style.left have a pixel unit, you need to use a function parseInt() to parse the value and convert it to an integer as illustrated in the first line of the function.

The up and down function MoveUp() in lines 4954 also contains only three statements. The statements are similar to those discussed above. This page works on all W3C-compliant browsers and a screen shot of this page in action is shown in Fig. 9.2.

9.1.3 Screen depth and z-index

While the top and left values define a 2D coordinate system of a Web page, you can use another CSS property called the z-index to specify the screen depth. In fact, the z-index is a stack order to determine whether an object should be in front of or behind another object. Consider the following example:

Example: ex09-03.htm - Screen Depth And Z-index

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http:/+www*w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Screen Depth and Z-index - ex0903.htm </title></head>
 6: <body style="background:#000088;font-family:arial;font-size:28pt;
 7:   color:#ffff00;font-weight:bold;text-align:center">
 8: <div align="center">Screen Depth and Z-index</div>
 9: <div style="font-size:18pt" id="xyPos" name="xyPos"></div>
10:
11: <div id="frontPic" name="frontPic"
12:    style="position: absolute;
13:         top: 100px;
14:         left: 140px;
15:         height: 300px;
16:         width: 140px;
17:         color: white;
18:         text-align: center;
19:         background: red;
20:         font-size:18pt;
21:         font-weight: bold;
22:         z-index: 4">
23: <b>Front Pic<br /> Z-index= 4</div>
24:
25: <div id="backPic" name="backPic"
26:    style="position: absolute;
27:         top: 100px;
28:         left: 360px;
29:         height: 300px;
30:         width: 140px;
31:         color: white;
32:         text-align: center;
33:         background: blue;
34:         font-size: 18pt;
35:         font-weight: bold;
36:         z-index: 2">
37: <b>Back Pic<br /> Z-index=2</div>
38:
39: <div id="middlePic" name="middlePic"
40:    style="position: absolute;
41:         top: 120px;
42:         left: 0px;
43:         height: 230px;
44:         width: 200;
45:         color: #ffff00;
46:         text-align: center;
47:         font-size: 20pt;
48:         font-weight: bold;
49:         z-index: 3">
50: Pumkin Head <br>Middle Pic<br><img src="pumkin.gif" alt="pic" /></div>
51:
52: <script>
53: var ixDelta = 5;
54: function MoveLeft()
55: {
56:  lxPos = parseInt(document.getElementById("middlePic").style.left)+ixDelta
57:  if (lxPos >= 400 || lxPos < 0) ixDelta = ixDelta * -1
58:  document.getElementById("xyPos").innerHTML="(top,left) = (120,"+lxPos+")"
59:  document.getElementById("middlePic").style.left = lxPos + "px"
60: }
61: setInterval ("MoveLeft()",50)
62: </script>
63: </body>
64: </html>

This example contains three pictures, namely, frontPic, backPic, and a moving image middlePic. Each of them has a z-index value as one of the CSS properties. A z-index value is a stack order, which means that a bigger value will be on top of smaller values just like a stack. These front and back features should be clearer if you animate the middle image middlePic by calling the script function MoveLeft() as defined in lines 5461. This function is basically the same as that in example ex09-02.htm to move the object in the left and right directions. The image itself is an animated gif file. You will have a more realistic animation effect if you can combine animated gif with motion. The additional statement in line 58 is used to output the (top, left) coordinates to xyPos as defined in line 9. As the middle image moves, the coordinates are updated continuously. A screen shot of this page in action is shown in Fig. 9.3.

We now have some ideas on moving objects and how to program them. In real applications, the ultimate goal is the ability to control objects with user interrogations, and to develop stunning dynamic Web pages. In fact, you may recall that Chapter 6 of this book was devoted to the discussion of mouseover control and how to program XHTML page dynamically. From mouseover techniques to the control of browser windows, they are all examples of dynamic features. These techniques can be used to advance our study of moving objects. For example, a combination of mouse techniques and moving objects is very popular. They have an important impact on a number of entertainment industries, including games on the Web. In order to advance the discussion on these subjects and be able to interface with hardware, we begin with mouse event and event handlers.