• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

29.4. Creating Layers

Dynamically positioned objects in DHTML are often referred to as layers, probably because they work like the layers used in many graphics programs, such as Adobe Photoshop. A layer is a container for content that can be positioned in the x (horizontal), y (vertical), and z (stacking order) dimensions. A typical layer is created with a <div> tag surrounding other HTML elements, as shown in Example 29-2. Special attributes in the <div> tag define its behavior. Once you've created a layer, you can show and hide it, animate it, or change its appearance in other ways. (Note that this example simply demonstrates creating a layer, not manipulating it in any way; we'll see examples of that shortly.)

Example 29-2. Defining a Simple Layer

<html>
<head>
<style type="text/css">
<!--
.welcome { font-family: Geneva, Arial, Helvetica, san-serif; 
           font-size: large; 
           font-style: oblique;}
-->
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="Layer1"   (A)
     style="position:absolute;   (B)
            z-index:1;   (C)
            left:100px; top:10px;   (D)
            width:300px; height:60px;   (E)
            background-color: #FFCC00;"> (F)

<p align="center" class="welcome">Welcome To Jen's World!</p>
</div>
</body>
</html>


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint