Download Free Java Script Source

for use

Add the following script into the <head> section of your page:
<style type="text/css"> #plane1 {position:absolute; left:320; top:100; width:121; z-index:0} #plane2 {position:absolute; left:380; top:165; width:118; z-index:0} </STYLE> <SCRIPT LANGUAGE="JavaScript"> var isNav, isIE if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true } } // ***Begin CSS custom API Functions*** // Set zIndex property function setZIndex(obj, zOrder) { obj.zIndex = zOrder } // Position an object at a specific pixel coordinate function shiftTo(obj, x, y) { if (isNav) { obj.moveTo(x,y) } else { obj.pixelLeft = x obj.pixelTop = y } } // ***End API Functions*** // Global holds reference to selected element var selectedObj // Globals hold location of click relative to element var offsetX, offsetY // Find out which element has been clicked on function setSelectedElem(evt) { if (isNav) { // declare local var for use in upcoming loop var testObj // make copies of event coords for use in upcoming loop var clickX = evt.pageX var clickY = evt.pageY // loop through all layers (starting with frontmost layer) // to find if the event coordinates are in the layer 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)) { // if so, then set the global to the layer, bring it // forward, and get outa here selectedObj = testObj setZIndex(selectedObj, 100) return } } } else { // use IE event model to get the targeted element var imgObj = window.event.srcElement // make sure it's one of our planes if (imgObj.parentElement.id.indexOf("plane") != -1) { // then set the global to the style property of the element, // bring it forward, and say adios selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } } // the user probably clicked on the background selectedObj = null return } // Drag an element function dragIt(evt) { // operate only if a plane is selected if (selectedObj) { if (isNav) { shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)) } else { shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) // prevent further system response to dragging in IE return false } } } // Set globals to connect with selected element function engage(evt) { setSelectedElem(evt) if (selectedObj) { // set globals that remember where the click is in relation to the // top left corner of the element so we can keep the element-to-cursor // relationship constant throughout the drag if (isNav) { offsetX = evt.pageX - selectedObj.left offsetY = evt.pageY - selectedObj.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } // block mouseDown event from forcing Mac to display // contextual menu. return false } // Restore elements and globals to initial values function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) selectedObj = null } } // Turn on event capture for Navigator function setNavEventCapture() { if (isNav) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) } } // Assign event handlers used by both Navigator and IE (called by onLoad) function init() { if (isNav) { setNavEventCapture() } // assign functions to each of the events (works for both Navigator and IE) document.onmousedown = engage document.onmousemove = dragIt document.onmouseup = release } </SCRIPT>

Add the following script into the <BODY> section of your page:
<style>  </style></HEAD> <BODY> <ilayer id="coffeemenu01" height=35px> <layer id="coffeemenu02" visibility=show> <span id="wrapper"> <span id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false"> <font face="Verdana"><b><a href="notthisbrowser.html">Click Here To Navigate</a></b></font> </span> </span> </layer> </ilayer> <script language="JavaScript1.2"> var enableeffect=true var selection=new Array() selection[0]='<font face="ARIAL BLACK"><a href="http://www.coffeecup.com">Order Our Stuff</a><br>' selection[1]='<a href="http://www.coffeecup.com">Contact Us via E-mail</a><br>' selection[2]='<a href="http://www.coffeecup.com">Help With Our Items</a><br>' selection[3]='<a href="http://www.coffeecup.com">Products We Have</a><br>' selection[4]='<a href="http://www.coffeecup.com">Services We Offer</a><br></font>' if (document.layers) document.coffeemenu01.document.coffeemenu02.visibility='show' function dropit2(){ if (document.all){ coffeemenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX coffeemenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (coffeemenu03.style.visibility=="hidden"){ if (enableeffect) coffeemenu03.filters.revealTrans.apply() coffeemenu03.style.visibility="visible" if (enableeffect) coffeemenu03.filters.revealTrans.play() } else{ hidemenu() } } } function dropit(e){ if (document.coffeemenu03.visibility=="hide") document.coffeemenu03.visibility="show" else document.coffeemenu03.visibility="hide" document.coffeemenu03.left=e.pageX-e.layerX document.coffeemenu03.top=e.pageY-e.layerY+19 return false } function hidemenu(){ if (enableeffect) coffeemenu03.filters.revealTrans.stop() coffeemenu03.style.visibility="hidden" } function hidemenu2(){ document.coffeemenu03.visibility="hide" } if (document.layers){ document.coffeemenu01.document.coffeemenu02.captureEvents(Event.CLICK) document.coffeemenu01.document.coffeemenu02.onclick=dropit } else if (document.all) document.body.onclick=hidemenu </script> <div id="coffeemenu03" style="position:absolute;left:0;top:0;layer-background-color:#C0C0C0;background-color:#C0C0C0;width:200;visibility:hidden;border:2px solid black;padding:0px"> <script language="JavaScript1.2"> if (document.all) coffeemenu03.style.padding='4px' for (i=0;i<selection.length;i++) document.write(selection[i]) </script> </div> <script language="JavaScript1.2"> if (document.layers){ document.coffeemenu03.captureEvents(Event.CLICK) document.coffeemenu03.onclick=hidemenu2 } </script>