1) Script Title: Kissing Trail

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici.../kisstrail.htm

3) Describe problem: This is not a problem with the script per se, but I was wondering if anyone could figure out a way to tweak this code so that instead of the heart and lips images, custom images that depend on the direction of the mouse movement appear instead. My idea is that I want to have images of footprints going in the direction of the mouse. I have tried to tweak the script to do this, but no joy. I have created my footprint images (a right and a left foot for the directions north, northeast, east, southeast, south, southwest, west, and northwest) and referenced them in the script, but when I test the script the images are not there - I only get the red "X" that one often sees when a web page can't load an image. I would be much obliged to anyone who can help me get this working - thanks ahead of time for looking at my code (Go easy on me - I'm a novice programmer with Javascript; I'm more comfortable with Actionscript!):

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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<style type="text/css">
<!--
h1 {
  color:#cc3333;
  font-family:"Comic Sans MS",Helvetica;
}
h3 {
  color:#993333;
  font-family:"Comic Sans MS",Helvetica;
}
.kisser {
  position:absolute;
  top:0;
  left:0;
  visibility:hidden;
}
-->
</style>

<script language="JavaScript1.2" type="text/JavaScript">
<!-- cloak

//Kissing trail- By dij8 (dij8@dij8.com)
//Modified by Dynamic Drive for bug fixes
//Visit http://www.dynamicdrive.com for this script

kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next heart appears

var theimage = "NL.gif" // North left foot
var theimage2 = "NR.gif" // North right foot
var theimage3 = "NEL.gif" // Northeast left foot
var theimage4 = "NER.gif" // Northeast right foot
var theimage5 = "EL.gif" // East left foot
var theimage6 = "ER.gif" // East right foot
var theimage7 = "SEL.gif" // Southeast left foot
var theimage8 = "SER.gif" // Southeast right foot
var theimage9 = "SL.gif" // South left foot
var theimage10 = "SR.gif" // South right foot
var theimage11 = "SWL.gif" // Southwest left foot
var theimage12 = "SWR.gif" // Southwest right foot
var theimage13 = "WL.gif" // West left foot
var theimage14 = "WR.gif" //  West right foot
var theimage15 = "NWL.gif" // Northwest left foot
var theimage16 = "NWR.gif" // Northwest right foot




//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
var myx, myy, xold, yold, xdiff, ydiff
var myimage, myimage2
 
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}
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
  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) {
  eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}

function kissbegin(){
//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 -->


document.onmousemove = FindXY;



function FindXY(loc) {
myx = (document.layers) ? loc.pageX : event.clientX;
myy = (document.layers) ? loc.pageY : event.clientY;
xdiff = myx - xold;
ydiff = myy - yold;


if ((xdiff <  2) && (ydiff < -2)) myimage = theimage; myimage2 = theimage2;
if ((xdiff <  2) && (ydiff >  2)) myimage = theimage3; myimage2 = theimage4;
if ((xdiff >  2) && (ydiff <  2)) myimage = theimage5; myimage2 = theimage6;
if ((xdiff < -2) && (ydiff <  2)) myimage = theimage7; myimage2 = theimage8;
if ((xdiff >  2) && (ydiff >  2)) myimage = theimage9; myimage2 = theimage10;
if ((xdiff >  2) && (ydiff < -2)) myimage = theimage11; myimage2 = theimage12;
if ((xdiff < -2) && (ydiff >  2)) myimage = theimage13; myimage2 = theimage14;
if ((xdiff < -2) && (ydiff < -2)) myimage = theimage15; myimage2 = theimage16;


xold = myx;
yold = myy;

return myimage;
return myimage2;
}


</script>

</head>

<body>

<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="' + myimage + '" alt="" border="0"></div>\n')
  document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + myimage2 + '" alt="" border="0"></div>\n')
}
}


// decloak -->
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br />
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>



</body>
</html>