Moving Objects in 3D

All positioned objects can be stacked (see "Stacking Objects" in Chapter 7), and you can use JavaScript to find the object's order in the z-index as well as to change that order.

In this example (Figures 16.9 and 16.10), clicking any of the objects will bring it to the front of the stack. Clicking another object will cause the last clicked to revert to its original position, and the new element to come to the front.

Figure 16.9. This is the stacking order when the page is first loaded.

Figure 16.10. The hapless servants to the queen now pop to the front.

To set the 3D position of an object:

var prevObjectID = null; var prevLayer = 0;

In your JavaScript (see Code 16.6 on the next page), initialize two variables:

prevObjectID, which stores the ID of the previously selected object
prevLayer, which stores the z-index of the previously selected object

Code 16.6. The `swapLayer()` function works in conjunction with the `findLayer()` and `setLayer()` functions to pop an object to the top of the stack.

[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 | Moving Objects in 3-D</title> <script type="text/javascript"> var prevObjectID = null; var prevLayer = 0; function setLayer(objectID,layerNum) {      var object = document.getElementById(objectID);      object.style.zIndex = layerNum; } function findLayer(objectID) {      var object = document.getElementById(objectID);      if (object.style.zIndex != null)         return object.style.zIndex;      return (null); } function swapLayer(evt) {      var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id :  null);      if (prevObjectID != null) setLayer(prevObjectID,prevLayer);      prevLayer = findLayer(objectID);      prevObjectID = objectID;      setLayer(objectID,1000); } </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 {      position: absolute;      z-index: 0;      top: 5px;      left: 5px;      background: white url(alice30a.gif) no-repeat;      height:408px;      width:300px;} </style> </head> <body> <div   onclick="swapLayer(event);">Object 1</div> <div   onclick="swapLayer(event);">Object 2</div> <div   onclick="swapLayer(event);">Object 3</div> <div   onclick="swapLayer(event);">Object 4</div> </body></html>

function setLayer(objectID, layerNum) {...}

Add the function setLayer() to your JavaScript. This function reassigns the z-index of an object to the indicated layer number.

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 and return the current z-index of the layer.

function swapLayer(evt) {...}

Add the function swapLayer() to your JavaScript.

This function demotes the previously selected layer (if there is one) back to its previous z-index and then promotes the selected layer (as indicated by the objectID) to the top.

#object1 {...}

Set up the CSS rules for your object(s) with position and z-index values.

Set up your object(s).

onclick="swapLayer(event);"

Add to the element an event handler that triggers the swapLayer() function.

Tip

Using a negative number for the z-index causes an element to be stacked that many levels below its parent instead of above.

Figure 16.9. This is the stacking order when the page is first loaded.

Figure 16.10. The hapless servants to the queen now pop to the front.

Code 16.6. The swapLayer() function works in conjunction with the findLayer() and setLayer() functions to pop an object to the top of the stack.

Code 16.6. The `swapLayer()` function works in conjunction with the `findLayer()` and `setLayer()` functions to pop an object to the top of the stack.