JavaScript and Ajax second addition Tutorial 11 case problem 2

Having problem with shadow code shadow.js or overlay.js. My shadow appears in front of my box instead of behind it.

Here is the shadow.js

Custom objects and methods

shadow(source, offX, offY, r, g, b, op) Constructs a shadow object for the source object with horizontal and vertical offsets offX and offY, and color value r,g,b and opacity op.

*/ function shadow(source, offX, offY, r, g, b, op) { this.srcObject = source; this.offsetX = offX; this.offsetY = offY; this.color = "rgb(" + r + "," + g + "," + b + ")"; this.opacity = op; }

shadow.prototype.addToPage = function() { this.divElem = document.createElement("div"); document.body.appendChild(this.divEle… this.divElem.id = this.srcObject.id + "DropShadow"; this.divElem.style.backgroundColor = this.color; this.divElem.style.width = getStyle(this.srcObject, "width"); this.divElem.style.height = getStyle(this.srcObject, "height"); setOpacity(this.divElem, this.opacity); this.divElem.style.position = "absolute"; this.divElem.style.display = "none"; var objectZ = getStyle(this.srcObject, "z-index"); if (objectZ == "auto" || objectZ == "undefined") objectZ = 1; this.srcObject.style.zIndex = objectZ + 1; this.divElem.style.zIndex = objectZ;

}

overlay.js

addEvent(window, "load", addOverlay, false);

function addOverlay() {

var allOverlayTargets = document.getElementsByTagName("td");

for (var i = 0; i < allOverlayTargets.length; i++) {

var overlayID = allOverlayTargets[i].id + "Overlay"; var overlay = document.getElementById(overlayID);

allOverlayTargets[i].onmouseover = function(e) { this.style.backgroundColor = "rgb(255, 225, 255)"; } allOverlayTargets[i].onmouseout = function(e) { this.style.backgroundColor = "rgb(255, 255, 255)"; }

allOverlayTargets[i].onmousedown = function(e) { var evt = e || window.event; var overlay = document.getElementById(this.id + "Overlay"); overlay.style.display = "block";

if (evt.pageX) { overlay.style.left = evt.pageX + 5 + "px"; overlay.style.top = evt.pageY + 5 + "px"; } else { var offX = document.documentElement.scrollLeft + document.body.scrollLeft; var offY = document.documentElement.scrollTop + document.body.scrollTop; overlay.style.left = evt.clientX + offX + 5 + "px"; overlay.style.top = evt.clientY + offY + 5 + "px"; } myShadow = new shadow(overlay, 13, 13, 0, 0, 0, 30); myShadow.addToPage(); myShadow.divElem.style.display = "block"; myShadow.divElem.style.left = parseInt(overlay.style.left) + myShadow.offsetX + "px"; myShadow.divElem.style.top = parseInt(overlay.style.top) + myShadow.offsetY + "px"; }

allOverlayTargets[i].onmouseup = function(e) { var evt = e || window.event; var overlay = document.getElementById(this.id+"Overlay… overlay.style.display = "none"; var shadowElem = document.getElementById(overlay.id + "DropShadow"); document.body.removeChild(shadowElem); }

} }