Finding an Object s 3D Position

Finding an Object's 3D Position

The CSS property z-index lets you stack positioned elements in 3D (see "Stacking Objects" in Chapter 7). Using JavaScript, you can determine the z-index of individual objects on the screen using the style.zIndex property.

But there's a catch: Browsers can't easily see the z-index until it is set dynamically. To get around this little problem, you have to use JavaScript to set the z-index of each object when the page first loads.

In this example (Figure 14.10), clicking any of the objects will produce an alert displaying the z-index value for that element.

Figure 14.10. An alert appears, displaying the layer number of the object clicked.

To find the z-index of an object:

function initPage() {...}

Add the initPage() function to your JavaScript (Code 14.6). This function sets the initial z-index of objects when the page first loads.

Code 14.6. The function `findLayer()` determines the z-index of an individual object on the page after the layers are initialized using `initPage()`.

[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 &amp; Ajax | Finding the Z Position</title>  <script type="text/javascript">  function initPage() {       for (i=1; i<=4; i++) {           var object = document.getElementById('object' + i);           object.style.zIndex = i;       }  }  function findLayer(objectID) {       var object = document.getElementById(objectID);       if (object.style.zIndex)       return object.style.zIndex;       return (null);  }  function whichLayer(evt) {       var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id  : null);       if (objectID) {          layerNum = findLayer(objectID);       alert('Layer: ' + layerNum );       }  }  </script>  <style type="text/css" media="screen">  .dropBox {       position: absolute;       text-align: right;       padding: 4px;       background-color: #FFFFFF;       border: 2px solid #f00;       cursor: pointer; }  #object1 {       z-index: 3;       top: 285px; left: 315px;       background: white url(alice22a.gif) no-repeat;       height:220px; width:150px; }  #object2 {       z-index: 2;       top: 210px; left: 225px;       background: white url(alice15a.gif) no-repeat;       height:264px; width:200px; }  #object3 {       z-index: 1;       top: 105px;       left: 115px;       background: white url(alice28a.gif) no-repeat;       height:336px; width:250px; }  #object4 {       z-index: 0;       top: 5px; left: 5px;       background: white url(alice30a.gif) no-repeat;       height:408px; width:300px;}  </style>  </head>  <body onload="initPage()">  <div   onclick="whichLayer(event)"> Object 1</div>  <div   onclick="whichLayer(event)"> Object 2</div>  <div   onclick="whichLayer(event)"> Object 3</div>  <div   onclick="whichLayer(event)"> Object 4</div>  </body></html>

function findLayer(objectID) {...}

Add the function findLayer() to your JavaScript. This function uses the ID of the object to be addressedpassed to it as the variable objectIDto find the object. The function then uses this ID to access the z-index property and returns that value.

function whichLayer(evt) {...}

Create a JavaScript function called whichLayer() that passes the ID value for the initiating object to the function findLayer():

var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);

The function then displays the returned values in an alert.

#object1 {...}

Set up the CSS rules for your objects with position and z-index properties.

onload="initPage();"

In the <body> tag, use the initPage() function to initialize the z-index of all the objects for which you need to know the initial z-index.

onclick="whichLayer(event);"

Add an event handler to trigger the function you created in Step 3, and pass to it the event.

Tip

An alternate (though no less complex) method for finding the z-index of any object without first setting the value using JavaScript is presented in "Finding a Style Property's Value's Value" in Chapter 16.