PDA

View Full Version : trailing mouse under images



toplessjan
01-25-2013, 03:16 PM
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/dynamicindex13/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:


<!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>

jscheuer1
01-25-2013, 04:49 PM
Change:



.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
}

to:


.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
z-index:1010;
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.