Code to drag the layers
<SCRIPT LANGUAGE="JavaScript"> // Global variables for platform branching var isNav, isIE if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true } } // ***Begin Utility Functions*** // Set zIndex property function setzIndex(product, zOrder) { product.zIndex = zOrder } // Position an object at a specific pixel coordinate function shiftTo(product, x, y) { if (isNav) { product.moveTo(x,y) } else { product.pixelLeft = x product.pixelTop = y } } // ***End Utility Functions*** // Global variable that holds reference to selected element var selectedProduct // Global variables that hold location of click relative to element var offsetX, offsetY // Find out which element has been clicked on function setSelectedElem(evt) { if (isNav) { var clickX = evt.pageX var clickY = evt.pageY var testObj for (var i = document.layers.length - 1; i >= 0; i--) { testObj = document.layers[i] if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height)) { selectedProduct = testObj if (selectedProduct) { setZIndex(selectedProduct, 100) return } } } } else { var imgObj = window.event.srcElement selectedProduct = imgObj.parentElement.style if (selectedProduct) { setzIndex(selectedProduct,100) return } } selectedProduct = null return } // Drag an element function dragProduct(evt) { if (selectedProduct) { if (isNav) { shiftTo(selectedProduct, (evt.pageX - offsetX), (evt.pageY - offsetY)) } else { shiftTo(selectedProduct, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) // prevent further system response to dragging return false } } } // Turn selected element on function grabProduct(evt) { setSelectedElem(evt) if (selectedProduct) { if (isNav) { offsetX = evt.pageX - selectedProduct.left offsetY = evt.pageY - selectedProduct.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } // prevent further processing of mouseDown event so // that the Macintosh doesn't display the contextual // menu and lets dragging work normally. return false } // Turn selected element off function releaseProduct(evt) { setzIndex(selectedProduct, 0) selectedProduct = null } // Set event capture for Navigator function setNSEventCapture() { if (isNav) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) } } // Assign event handlers used by both Navigator and IE function init() { if (isNav) { setNSEventCapture() } document.onmousedown = grabProduct document.onmousemove = dragProduct document.onmouseup = releaseProduct } </SCRIPT> <BODY onLoad="init()">