| Simply stated, an object is an HTML element (see "Understanding an Element's Box" in Chapter 6) that can be uniquely identified in the Web page. The HTML element has a unique address in the browser window specified by the DOM. Some objects are accessible by the DOM because of the type of element they are. For example, forms and images can be addressed by using their position in the form or image array for a page. However, this can be difficult to figure out, and it is often much easier to simply give the element a unique identity. Any element in the browser windowat least, any element enclosed within HTML tagscan be identified with an ID attribute to give it its own unique address and make it an object, rather than simply an element. Identifying an HTML element as an object (Figure 12.3) allows you to change any of that element's attributesat least, to the extent that the browser allows. Figure 12.3. You can set up an object using the ID attribute that gives the element an easily recognizable and unique address. 
To set up an object: 1. | #object1 {. . .}
Add an ID selector rule to your CSS, and define the position as either absolute or relative (see "Defining ID Selectors to Identify an Object" in Chapter 2). You can also add any other definitions you desire, but you must include the position for this object to be a layer (Code 12.2).
Code 12.2. This code sets up a CSS layer, which is applied to a DIV tag with an ID.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Creating An Object</title> <style type="text/css" media="screen"> body { font: 1em Georgia, "Times New Roman", times, serif; color: #000; background-color: #ccc; margin: 8px; } #object1 { padding: 4px; background-color: #fff; border: 2px solid #f00; position: absolute; z-index: 3; top: 100px; left: 150px; width: 210px; } </style> </head> <body> <div > <img src="/books/3/292/1/html/2/alice04.gif" alt="alice" height="298" width="200" /> <h1>object 1</h1> </div> </body></html>
|
| 2. | <div >. . .</div>
Apply the ID to an HTML tagand it can now be identified and accessed using DOM. Notice in this example that not only is the image a part of the object, but the text within the <div> tag is a part of the object as well. All elements within the containing tag (the <div> tag, in this example) become a part of the object.
|
 Tips
You don't actually have to set the object up as shown in Step 1 in order to create an object. All you need to do is add a unique ID to the tag as shown in Step 2. You can use a <div> tag for absolutely positioned objects or a <span> tag for relatively positioned objects. You may notice that IDs work a lot like the name attribute to identify the object on the page. However, name is being phased out. For more details, see the sidebar "Should I Use Name or ID?" A layer is an independent object on the page created using CSS that can be moved on top of other objects. For more details, see the sidebar "CSS Layers."
Should I Use a Name or ID? To name objects on a page, you can use either the name attribute: <img name="button1" src="/books/3/292/1/html/2/button_off.png" />
or the id attribute: <img src="/books/3/292/1/html/2/button_off.png" />
However, XHTML is phasing out the use of the name attribute and using id in its place. This is fine for newer browsers, but may cause problems in earlier browsers. The good news is that if you are using transitional XHTML, you can include both attributes, just in case. |
CSS Layers Often, objects using an ID are referred to as layers. These terms can lead to some confusion, however, because the term layer was actually coined to describe a similar technology in Netscape. Although any HTML tag can be turned into a CSS layer with the addition of the id attribute, Netscape Navigator 4 introduced a <layer> tag to achieve a similar result. The term layers seems to be sticking to CSS objects, however, and Netscape layers have been forgotten since recent versions of Netscape (6+) and Mozilla do not support them. To prevent confusion in this book, I will refer specifically to Netscape layers and refer to CSS layers simply as layers. |
|
