|
|
 |
 |
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98
In addition to the many layer properties you can reference, JavaScript also supports several methods that you can apply to a layer. Table 25.3 summarizes these methods.
Now that you know about the layer object, its properties, its methods, and the event handlers available in the Netscape browser object model, you are finally ready to take a look at some examples of truly Dynamic HTML—pages that change right in the browser window without going back to the server to get more content.
| Table 25.2 Properties of a Selected Layer
|
|
| Property
| Description
|
|
| above
| the layer above the selected layer or the browser window if you have selected the topmost layer
|
| background.src
| the URL of the image file to use as the background
|
| below
| the layer below the selected layer or null if the selected layer is at the lowest level
|
| bgColor
| color specification for the background
|
| clip.bottom
| controls the position of the bottom edge of the clipping region
|
| clip.left
| controls the position of the left edge of the clipping region
|
| clip.right
| controls the position of the right edge of the clipping region
|
| clip.top
| controls the position of the top edge of the clipping region
|
| clip.height
| controls the distance between the top and bottom edges of the clipping region
|
| clip.width
| controls the distance between the left and right edges of the clipping region
|
| document
| object that enables you to reference the contents of a layer
|
| left
| controls the horizontal position of where the layer begins
|
| name
| the unique name of the layer as assigned by the ID attribute of the <LAYER> tag
|
| pageX
| the horizontal position of the layer with respect to the browser screen
|
| pageY
| the vertical position of the layer with respect to the browser screen
|
| parentLayer
| the layer that contains the object layer or the browser window if the object layer is a top-level layer
|
| siblingAbove
| the sibling layer (same parent layer) that is above the object layer in the stacking order, or null if there is no layer above it
|
| siblingBelow
| the sibling later (same parent layer) that is below the object layer in the stacking order, or null if there is no layer above it
|
| src
| the URL of the document to be loaded into the layer
|
| top
| controls the vertical position of where the layer begins
|
| visibility
| determines whether the content of the layer is shown or hidden
|
| zIndex
| determines the layer’s position in the stacking order
|
|
| Table 25.3 JavaScript Methods for the layer Object
|
|
| Method Name
| Function
|
|
| load(URL, width)
| loads the document at the URL specified into the layer (replacing existing content in the layer) and changes the width of the layer to the value in the second argument
|
| moveAbove(layer)
| moves a layer to a position in the stacking order above the layer in the argument
|
| moveBelow(layer)
| moves a layer to a position in the stacking order below the layer in the argument
|
| moveBy(dx,dy)
| moves a layer dx pixels to the left and dy pixels down
|
| moveTo(x,y)
| moves an absolutely positioned layer to the specified coordinates with the containing document or layer; moves a relatively positioned layer to the specified coordinates, taken with respect to the layer’s natural position
|
| moveToAbsolute(x,y)
| moves a layer to the specified coordinates, taken with respect to the browser screen
|
| resizeBy(dw,dh)
| adds dw to the layer width and dh to the layer height
|
| resizeTo(width,height)
| resets the layer’s width and height to the specified values
|
|
Animated Buttons Using Layers
When you push a button on an appliance or dashboard, you get visual and tactile feedback from the button that tells you something about its status. If the button is depressed, you know that what it controls is on. Conversely, you know that the function the button controls is off if the button is raised. When you press the button to toggle its state, you feel a click as it moves to its new position. This tells you that you have changed states successfully. Unfortunately, this kind of feedback has been tough to provide for buttons on Web pages. Although you will probably never be able to provide tactile feedback to a user pressing a button, Dynamic HTML enables you to give visual feedback about whether the button is depressed or raised, whether the user’s mouse is over it, and whether the button is being pressed.
Suppose you are designing an interface where you want your buttons to have the following three states:
- • Raised
- • Selected (meaning the user’s mouse is over it)
- • Depressed
|
