[ Pobierz całość w formacie PDF ]
.Properties are different for every object but aretypically descriptors such as color, size, position, etc.Referencing yet anotherbranch in the DOM can access these properties.Image objects in an HTML pagehave a source property, which is the image s path or URL.Here s how we wouldreference the start image s source file:document.images.start.srcBy accessing and manipulating an image s source property, you can create effectssuch as rollovers (see Chapter 22).Because Netscape and Internet Explorer don t agree on the names of object prop-erties, you must program for properties that Netscape and Internet Explorer havein common.There are three properties for positionable objects that Netscape and InternetExplorer share:" Location" Visibility" Stacking order (z-index)LocationYou can control an object s location through its X and Y coordinates.These twoproperties are named differently by Netscape and Internet Explorer.In Netscape, apositionable object s X coordinate is called left and its Y coordinate is calledtop.To access a positionable object s X coordinate in Netscape you could write:document."layer_name".leftTo access an object s Y coordinate in Netscape you write:document."layer_name".topInternet Explorer s positionable objects have these same properties but they arereferred to through different names.In Internet Explorer, a positionable object s Xcoordinate is called pixelLeftand its Y coordinate is called pixelTop.To accessa positionable object s X coordinate in Internet Explorer you would use thepixelLeft property:document.all."style_name".style.pixelLeftTo access an object s Y coordinate in Internet Explorer you write:document.all."style_name".style.pixelTopThe Document Object Model 433Web Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. The Document Object ModelThese properties return an integer indicating the number of pixels between thetop-left corner of the browser window and the object s position.Thus, the top orpixelTop property of 200 positions an object 200 pixels below the document stop border.VisibilityIn both Netscape and Internet Explorer, a positionable object s visibilityprop-erty can be set to visible, hidden, or inherit.What the visible and hiddenvalues do are self-explanatory.Setting an object s position property to inheritgives the object the same visibility as its containing object.In Netscape, a position-able object s visibility can be set to visible like this:document."layer_name".visibility = "visible";You can do the same in Internet Explorer like this:document.all."style_name".visibility = "visible";Stacking oder (z-index)Stacking order or z-index works the same way in both Netscape and InternetExplorer: the z-index property of the layer (Netscape) or style (IE) determines theobject s place in the stack.Stacking order is set to an integer.A layer or style witha stacking order of 1 will be placed above an object with a stacking order of 0.You can set stacking order in Netscape like this:document."layer_name".zIndex = "1";In Internet Explorer it is set like this:document."style_name".zIndex = "1";Because of these fundamental differences in Netscape and Microsoft s implementa-tion of the DOM, you need to customize your HTML for each of the DHTML-capable browsers; that is, you have to create two sets of JavaScript code.Theresult is cross-platform DHTML.Writing for Both BrowsersTo write DHTML for both Netscape and Internet Explorer, you must create twosets of JavaScript functions.The user s browser will determine which set of functionsto use.If the viewer is using Internet Explorer, then the Internet Explorer-specificJavaScript will be run.If the viewer is using Netscape, then the Netscape-specificJavaScript will be run.See the Browser Differences section later in this chapterfor more information.Although this is tedious, it isn t as difficult as it sounds.Code written for one pagecan be modified and reused for another [ Pobierz caÅ‚ość w formacie PDF ]