Kissing Trail script - no image on web site

**Grandma Lois** · 09-05-2005, 08:54 PM

Hi,
I am having trouble with the kissing trail script http://www.dynamicdrive.com/dynamici.../kisstrail.htm . When I insert the kissing trail script into my code, the lips and hearts show up when I check it in my browser. However, when I put it to the server, not a freebie, instead of lips and hearts, there are just little boxes with an x in them which do follow the moving cursor.

This problem it seems to me, is similar to when a picture used on the actual page is not pointing to the server but instead is only pointing locally. But because the pictures are not inserted into the actual web page I don't know how to correct this, if indeed this is the problem.

I have looked through the help that the mad professor, -John, has given others,as he helped me a couple of days ago, (Great help by the way. I used it on the script I needed help with and also another that seemed to have the same problem. Worked like a dream) but I didn't see this problem mentioned. I also looked in the archives and did find one problem # 109 that seemed to be similar, but this did not work at all.

This is the code for the web page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head><style type="text/css">

</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
theimage = "lips_small.gif" //the 1st image to be displayed
theimage2 = "small_heart.gif" //the 2nd 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 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
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 -->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Album Cover</title>

<style type="text/css">



</style></head>

<body><script language="JavaScript" type="text/JavaScript">

</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>
<table width="824" border="1">

<tr>

<th width="814" height="109" bgcolor="#CC9933" scope="col"><span class="style6">BRAVO FAMILY PHOTOGRAPHS </span></th>

</tr>

</table>

<table width="824" border="1">

<tr>

<th width="814" height="642" valign="top" bgcolor="#993333" scope="col"><p> </p>

<p><span class="style2">Grandchildren</span><br>

Hannah — Sophia — Ian </p>

<p> </p>

<table width="633" border="1">

<tr>

<th width="623" height="453" align="center" bgcolor="#333333" scope="col"><img src="PB230001.JPG" alt="Hannah Sophia Ian" width="575" height="400"></th>

</tr>

</table>

<p> </p>

<p> </p></th>

</tr>

</table>

<table width="824" border="1">

<tr>

<th width="814" height="74" valign="middle" bgcolor="#BD8E2F" scope="col"><div align="center" class="style1">

<pre><a href="Grandkids page 1.htm" class="style2">Table of Contents</a></pre>

</div></th>

</tr>

</table>

</body>

</html>

Thanks for any help you can give me,
Grandma Lois

**jscheuer1** · 09-05-2005, 09:12 PM

The way this script is written, this is where the images are declared:

Code:

theimage = "lips_small.gif" //the 1st image to be displayed
theimage2 = "small_heart.gif" //the 2nd image to be displayed

This means that to be visible, these images:

lips_small.gif
small_heart.gif

must be in the same directory as the page that uses them. There are other options, you could specify a path:

Code:

theimage = "images/lips_small.gif" //the 1st image to be displayed
theimage2 = "images/small_heart.gif" //the 2nd image to be displayed

or use an absolute path like:

http://www.yourdomain.com/images/lips_small.gif

as well. It is also crucial that the names of the images and path (if used) are written using the exact case (upper or lower case) letters as the actual files and paths on the server and of course, the images must be uploaded to the server.

**Grandma Lois** · 09-05-2005, 09:17 PM

Thank you John. I think my problem is solved. My face is as red as the lips and hearts. I didn't upload the pictures to the server. Good grief. But I am learning. Thanks for your help. I waited to ask this question until I knew you were online. Your white car is great.
Lois

**Grandma Lois** · 09-05-2005, 09:22 PM

Yes, now it works perfectly. Thanks again John.
Lois

Thread: Kissing Trail script - no image on web site

Thread Tools

Search Thread

Kissing Trail script - no image on web site

Bookmarks

Bookmarks

Posting Permissions