trailing mouse under images
Hi there -
Can somebody help me please
I have no idea why but my friend wants to use a cursor with trails on her website that I am building for her and I have used the code here http://www.dynamicdrive.com/dynamici.../kisstrail.htm
Unfortunately - it works fine but disappears underneath a 'fadeslideshow' Is there something to ensure the cursor stays on top?
The page is only in it's earliest stages but the code so far looks like this:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> <link href="_css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="_js/jquery.min.js"></script> <script type="text/javascript" src="_js/slideshow.js"> /*********************************************** * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <script type="text/javascript"> var mygallery=new fadeSlideShow({ wrapperid: "picture", dimensions: [960, 704], imagearray: [ ["_images/smoke.gif", "", "", ""], ["_images/stonehenge.jpg", "", "", ""] ], displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false}, persist: false, fadeduration: 900, descreveal: "peekaboo", togglerid: "" }) </script> <script type="text/javascript" src="http://static.websimages.com/JS/fw.js"></script><style type="text/css"> .kisser { position:absolute; top:0; left:0; visibility:hidden; } </style> <script language="JavaScript1.2" type="text/JavaScript"> <!-- cloak if (document.all||document.getElementById||document.layers){ //Kissing trail- By dij8 (dij8@dij8.com) //Modified by Dynamic Drive for bug fixes //Visit http://www.dynamicdrive.com for this script kisserCount = 30 //maximum number of images on screen at one time curKisser = 0 //the last image DIV to be displayed (used for timer) kissDelay = 500 //duration images stay on screen (in milliseconds) kissSpacer = 10 //distance to move mouse b4 next heart appears theimage = "http://images.freewebs.com/Images/MouseFX/GhostRiderFlame.gif" //the 1st image to be displayed //Browser checking and syntax variables var docLayers = (document.layers) ? true:false; var docId = (document.getElementById) ? true:false; var docAll = (document.all) ? true:false; var ns6=document.getElementById&&!document.all //Variables used in script var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage lastX = 0 lastY = 0 //Collection of functions to get mouse position and place the images function doKisser(e) { posX = getMouseXPos(e) posY = getMouseYPos(e) if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) { showKisser(posX,posY) lastX = posX lastY = posY } } // Get the horizontal position of the mouse function getMouseXPos(e) { if (document.layers||ns6) { return parseInt(e.pageX+10) } else { return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft)) } } // Get the vartical position of the mouse function getMouseYPos(e) { if (document.layers||ns6) { return parseInt(e.pageY) } else { return (parseInt(event.clientY) + parseInt(document.body.scrollTop)) } } //Place the image and start timer so that it disappears after a period of time function showKisser(x,y) { var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x if (curKisser >= kisserCount) {curKisser = 0} document.getElementById('kisser'+curKisser).style.left = processedx + "px"; document.getElementById('kisser'+curKisser).style.top = y + "px"; document.getElementById('kisser'+curKisser).style.visibility = "visible"; if (eval("typeof(kissDelay" + curKisser + ")")=="number") { eval("clearTimeout(kissDelay" + curKisser + ")") } eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)") curKisser += 1 } //Make the image disappear function hideKisser(knum) { document.getElementById('kisser'+knum).style.visibility = "hidden"; } function kissbegin(){ var docbody = document.body; var elem; var elem2; for(k=0;k<kisserCount;k++) { elem = document.createElement("DIV"); elem.setAttribute("id",("kisser"+k)); elem.className = "kisser"; elem2 = document.createElement("IMG"); elem2.src = theimage; elem2.setAttribute("alt",""); elem2.setAttribute("border","0"); elem.appendChild(elem2); docbody.appendChild(elem); } //Let the browser know when the mouse moves if (docLayers) { document.captureEvents(Event.MOUSEMOVE) document.onMouseMove = doKisser } else { document.onmousemove = doKisser } } window.onload=kissbegin } // decloak --> </script> </head> <body style="background-color: #4D4B4B"> <script language="JavaScript" type="text/JavaScript"> <!-- cloak // Add all DIV's of hearts if (document.all||document.getElementById||document.layers){ for (k=0;k<kisserCount;k=k+2) { document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n') document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n') } } // decloak --> </script> <div id="wrapper"> <div id="picture"></div> </div> </body> </html>
CSS Codes
Reply With Quote
Bookmarks