Results 1 to 2 of 2

Thread: trailing mouse under images

  1. #1
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    Change:

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

    Code:
    .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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 2
    Last Post: 05-22-2009, 01:58 AM
  2. Thumb Pop images On mouse houre images code
    By sreenivasulareddy in forum JavaScript
    Replies: 0
    Last Post: 04-14-2008, 12:30 PM
  3. Images and Mouse Events
    By KraftyDood in forum Graphics
    Replies: 1
    Last Post: 12-07-2006, 03:41 PM
  4. Mouse cursor and trailing
    By gjoaquin in forum JavaScript
    Replies: 3
    Last Post: 07-28-2005, 09:38 PM
  5. Mouse-over with 2 different images changing?
    By robertsaunders in forum JavaScript
    Replies: 5
    Last Post: 04-23-2005, 08:51 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •