Results 1 to 4 of 4

Thread: Kissing Trail script - no image on web site

  1. #1
    Join Date
    Aug 2005
    Location
    upper midwest USA
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Kissing Trail script - no image on web site

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

    <!--

    body,td,th {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    color: #000000;

    }

    body {
    background-color: #CCCCCC;
    margin-top: .3in;
    margin-left: 1in;
    }

    .style1 { font-size: 16px;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-style: normal;

    line-height: normal;

    font-weight: lighter;

    font-variant: normal;

    text-transform: none;

    }

    .style2 {

    font-size: 18px;

    font-family: Arial, Helvetica, sans-serif;

    font-style: normal;

    line-height: normal;

    font-weight: lighter;

    font-variant: normal;

    text-transform: none;

    }

    .style6 {font-size: 36px; font-family: Arial, Helvetica, sans-serif; font-style: normal; line-height: normal; font-weight: lighter; font-variant: normal; text-transform: none; }

    -->

    </style></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="' + 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>

    <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>&nbsp;</p>

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

    Hannah Sophia Ian </p>

    <p>&nbsp;</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>&nbsp;</p>

    <p>&nbsp;</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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 09-05-2005 at 09:14 PM.
    - John
    ________________________

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

  3. #3
    Join Date
    Aug 2005
    Location
    upper midwest USA
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Aug 2005
    Location
    upper midwest USA
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

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
  •