Kissing trail

**Peppy** · 01-30-2005, 04:42 PM

I am refering to this url: http://www.dynamicdrive.com/dynamici.../kisstrail.htm

I don't know where in the head section I have to insert code.

I mean there are two times: <style type="text/css"> and two times </style>

Do I have two cancle one of each?

This is my head section:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>index</title>
<meta name="GENERATOR" content="Virtual Mechanics WebDwarf V2 250c ">
<meta http-equiv="imagetoolbar" content="false">

<style type="text/css">
.fsx01 {font-size: 11px;}
.fsx02 {font-size: 12px;}
.fsx03 {font-size: 13px;}
.fsx04 {font-size: 15px;}
.fsx05 {font-size: 16px;}
.fsx06 {font-size: 19px;}
.fsx07 {font-size: 21px;}
.fsx08 {font-size: 24px;}
.fsx09 {font-size: 27px;}
.fsx10 {font-size: 29px;}
.fsx11 {font-size: 32px;}
.fsx12 {font-size: 35px;}
.fsx13 {font-size: 37px;}
.fsx14 {font-size: 48px;}
.fsx15 {font-size: 64px;}
.fsx16 {font-size: 96px;}
.txdec {text-decoration: none;}

.dfltt {font-family:Times New Roman;font-size:14px;font-weight:normal;text-decoration:none;text-align:left;}
body {margin:0;height:100%;width:100%;}
</style>
</head>

This is what I should insert:

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

**cr3ative** · 01-30-2005, 06:34 PM

It doesn't matter that much. Just dump the code for the HEAD section between <head> and </head> and the code for the BODY just before the </body> tag.

You made another thread like this, and in both cases can be easily solved just by tinkering with the code a little bit.

cr3ative

**mwinter** · 01-30-2005, 06:42 PM

Originally Posted by cr3ative

Just dump the code for the HEAD section between <head> and </head> [...]

Though first you should remove the SGML comment pair () from both the script and style elements, and change

HTML Code:

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

to

HTML Code:

<script type="text/javascript">

It would be even better if you placed the script (again ignoring the SGML comment delimiters) in an external file and referenced it using

HTML Code:

<script type="text/javascript" src="url/to/script-file.js"></script>

At least now if you use the script on multiple pages, your visitors will only have to download it once.

Mike

**Peppy** · 01-30-2005, 08:44 PM

Hi Mike!
Do I have to remove the words cloak and // decloak, too?

There is a body part, too!
Do I have to replace <script type="text/javascript">
and  there, too?

**Peppy** · 01-30-2005, 09:18 PM

Hi Cr3ative!

Would appreciate if you could help me to tinker!

**Peppy** · 01-30-2005, 11:51 PM

I did not work not with or without the words cloak and // decloak
and not with or without  - is there anybody who can help me further?

**mwinter** · 01-31-2005, 11:44 AM

Originally Posted by Peppy

I did not work not with or without the words cloak and // decloak
and not with or without  - is there anybody who can help me further?

I would have replied last night, however one of my hard disks is determined to die on me. As it had the swap file and (still has) the user profiles, to say my computer is unstable at the moment is an understatement. Therefore, I think you can forgive me if I've been a little preoccupied.

In response to your post, you have undoubtably done something wrong. Without a URL to the document in question, it would be waste of time (for either of us) to guess what. So, to save time I placed a quick demo online (it will remain there until tomorrow). I suggest you look at what you did differently as, to be honest, this is rather basic stuff.

Mike

**Peppy** · 01-31-2005, 05:02 PM

Hi Mike!

Thank you for trying to help me!

You are right - the trail thing itself is easy - I could do it on a seperate page.

So I tried something new. I made

1 page with a backgroundpicture, embeded music, a fading scroller and
a small picture.

A 2nd page with kissing trail.

A 3rd page with the document effect (snowfall).

A 4th page with the book flip slideshow.

(I created all pages with the code editor of my webdesign editor.)

I have two problems with the book flip slideshow:
a) It only shows 4 pictures though I arried 8.
b) I would like to change the position of the book.

Can you help me with this and then let's see if we can bring the 4 pages into 1.

**Peppy** · 02-01-2005, 02:15 AM

Hi!

I was able to bring page 1 (with a backgroundpicture, embeded music, a fading scroller and a small picture) and pages 3 (with document effect - snowfall) and 4 (with the book flip slideshow) together.

But I could not insert the kissing trail.

I was able to insert the kissing trail, but in this case the book flip slideshow would not work.

Can't the be in the same code???

**mwinter** · 02-01-2005, 03:27 PM

Originally Posted by Peppy

[...] I could not insert the kissing trail.

I was also able to insert the kissing trail, but in this case the book flip slideshow would not work.

Can't the be in the same code???

Sure they can.

Unfortunately, many scripts provided by this site don't do much in the way of promoting interoperability. A lot of the authors wrote code which produces a large number of global variables - which can lead to clashes between scripts - and several blindly attempt to run themselves when the containing document has finished loading. This latter action means that only the last script to execute will probably load properly.

The solution to both problems is really very simple, and would require no effort on your (the user's) part. I'll post that in a separate thread at some point, rather than here.

In your document, add an onload attribute to the body element like so:

HTML Code:

onload="kissbegin(); ImageBook();"

then find, and delete, the following line from the trail script:

Code:

window.onload=kissbegin

That should allow both to run simultaneously. If you still have problems, please post a URL to the document you're working with. Without that, I'll just have to keep guessing at reasons and it will take a lot longer to solve than if I can just look at the source.

Hope that helps,
Mike

Thread: Kissing trail

Thread Tools

Search Thread

Kissing trail

Bookmarks

Bookmarks

Posting Permissions