PDA

View Full Version : Kissing trail



Peppy
01-30-2005, 04:42 PM
I am refering to this url: http://www.dynamicdrive.com/dynamicindex13/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">
<!--
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>

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


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


<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


<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
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 (http://www.mlwinter.pwp.blueyonder.co.uk/dd/peppy/kiss-trail.html) 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. :eek:

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
[...] 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:


onload="kissbegin(); ImageBook();"then find, and delete, the following line from the trail script:


window.onload=kissbeginThat 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

Peppy
02-01-2005, 03:51 PM
I' m soooo happy you answered. :) Unfortunatly it did not work :confused:




THANK YOU FOR YOUR HELP!

mwinter
02-01-2005, 08:28 PM
I' m soooo happy you answered. :) Unfortunatly it did not work :confused:Then post a URL! That's the third time I've written that now. I'm not a mind reader. I can only make guesses at what you've done, the same as anyone else. Unless you allow us to look at your source code as it currently stands, this problem probably isn't going to be fixed. As a last resort, post your source code to the thread, but again, a URL would be much preferred.

Mike

Peppy
02-01-2005, 10:14 PM
Hi Mike! http://www.mainzelahr.de/smile/schuechtern/glcklch_103.gif

I did already post my url, but deleted it again,
because I found some misstakes.

Everything is fine now - there are only two problems:

The kissingtrail and
that not all 14 pictures I loaded in the book flip slide show show up, only 8.

Here is the url for the kissingtrail I created:
http://free.pages.at/lifeisbutadream/missukissingtrail/


Here is the url of the "main page":
http://free.pages.at/lifeisbutadream/missu/

mwinter
02-01-2005, 10:57 PM
I did already post my url, but deleted it again,
because I found some misstakes.Ah ha! Well, that explains that then. :D


there are only two problems:

The kissingtrailMove the style element that's currently in the body element into the head element. You'll also have to change how you include the images use in the trail (and either use the script or static HTML, not both). When you absolutely-positioned one of the containing div elements, you offset the position of trail images as they're absolutely-positioned, too. I suggest you just stick with the instructions for the script. If you're trying to achieve something in particular, it might be better to ask how to go about it.


and that not all 14 pictures I loaded in the book flip slide show show up, only 8.If I'm reading the source correctly, the script expects paired strings in the array where you defined the images. The first string is a URL to the image, and the second a link to apply to that image when it's shown. That means you need 28 strings in all:


var Book_Image_Sources = [
'URL1', '',
'URL2', '',
/* ... */
'URL14', ''
];Hope that helps,
Mike

Peppy
02-01-2005, 11:41 PM
Mike - you are a gem - now I have all pix where I want them.

THANK YOU http://www.cosgan.net/images/smilie/liebe/s010.gif


Conc. the kissingtrail:

I already once followed the instr. for the script - but as I told you if I do this the book flip will not work.

But maybe the reason therefor is also to find, cause arried the pics wrong.
So I will try it again.


You'll also have to change how you include the images use in the trail (and either use the script or static HTML, not both). When you absolutely-positioned one of the containing div elements, you offset the position of trail images as they're absolutely-positioned, too.

This sounds interessting - if I fail - I'll come back and tell you!

CU http://www.mainzelahr.de/smile/froehlich/zwinkern.gif

Peppy

Peppy
02-01-2005, 11:49 PM
OK - I did it again - it did not work. :rolleyes:

Please have a look at the html - and tell me the lines I should change!

THANKS

Peppy

http://free.pages.at/lifeisbutadream/missu/

mwinter
02-02-2005, 02:13 AM
OK - I did it again - it did not work. :rolleyes: I take it you're not referring to the slide show. I see all fourteen images.

As far as the trail script is concerned, look back to post #10 in this thread. If you do that, both the trail and slide show scripts will work. However, I'd seriously consider lightening the load on that page. The machine I use is fairly powerful and performance is choppy.

A few quick notes if I may:


Copy the placeholder.gif file (used with the slide show) to your own web space. It's bad manners to leech off of other people's sites, even if you didn't intend any harm.
Find the following style sheet rule:


.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
}and add


z-index: 1000;This will place the trail image above all of the other content.
Instead of that massive list of div elements to create your background, place inside one of the style elements (I'd go for the very beginning of the first one) this rule:


body {
background: url(image/satinblue.jpg);
}This will tile the background with that image in a much more efficient way.
Enjoy,
Mike

Peppy
02-02-2005, 08:41 AM
Good morning Mike! http://www.cosgan.org/images/midi/froehlich/a010.gif

THANK YOU so much.
I knew that when I change the z index the kisstrail would come to the front.
But I could not find one. Didn't think about adding :rolleyes: .

----

Had problems with this:
body {
background: url(image/satinblue.jpg);
}

* I tiped body,
body {
background: http://free.pages.at/lifeisbutadream/missu/(image/satinblue.jpg);
}

*Then I only added it into the body section.
{
background: http://free.pages.at/lifeisbutadream/missu/(image/satinblue.jpg);
}

* Then I tried to set the url between "".
body {
background: "http://free.pages.at/lifeisbutadream/missu/"(image/satinblue.jpg);
}

But the background was gone each time. http://www.mainzelahr.de/smile/geschockt/shocked01.gif

So I did not change this.

---

I neither see the bookflip pics - nor turning pages (with red cross) either.
I see a static 1 px frame with a red cross. http://www.cosgan.net/images/smilie/konfus/n010.gif

http://free.pages.at/lifeisbutadream/missu/

Then I tried again what you told me in post 10.
Now I the kisstrail is gone again an there are no turning pics.

mwinter
02-02-2005, 11:45 AM
Good morning Mike!Morning. :p


Had problems with this:
body {
background: url(image/satinblue.jpg);
}The URL might have been wrong or you might not have put it the right place, I'm not sure. If you try anything else, and it doesn't work, could you copy the HTML file and name it something like test.html. That way, you can keep a running version but provide a way for someone to see what you tried and why it didn't work.


* I tiped body,
body {
background: http://free.pages.at/lifeisbutadream/missu/(image/satinblue.jpg);
}When you specify a URL in a CSS declaration, the entire thing must be surrounded by url(...), just as I did previously. That would make the above:


body {
background: url(http://free.pages.at/lifeisbutadream/missu/image/satinblue.jpg);
}Remember to place it properly, for example:


<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;
z-index: 45;
}
body {
background: url(http://free.pages.at/lifeisbutadream/missu/image/satinblue.jpg);
}
</style>


Then I tried again what you told me in post 10.
Now I the kisstrail is gone again an there are no turning pics.I'm afraid you made a mistake. Remove what you added to the script element (onload="kissbegin(); ImageBook();"). It should have been inserted into the opening tag for the body element, replacing the existing onload attribute.

At the moment, your body element begins with:


<body onload="ImageBook()" bgcolor="#ffffff" alink="#ff0000" link="#0000ff" vlink="#800080">Change it to:


<body onload="kissbegin(); ImageBook();" bgcolor="#ffffff" alink="#ff0000" link="#0000ff" vlink="#800080">

Mike

Peppy
02-02-2005, 01:11 PM
<body onload="kissbegin(); ImageBook();" bgcolor="#ffffff" alink="#ff0000" link="#0000ff" vlink="#800080">

Of course! http://www.mainzelahr.de/smile/unsortierbar/doh.gif


Now everything but the background is fine!

What did I overlook now? http://www.cosgan.net/images/smilie/verschiedene/a015.gif

http://free.pages.at/lifeisbutadream/missu/

mwinter
02-02-2005, 01:27 PM
Now everything but the background is fine!Excellent! :D


What did I overlook now?You nested two rules (indented for clarity):


.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
z-index: 45;

body {
background: url(http://free.pages.at/lifeisbutadream/missu/image/satinblue.jpg);
}
}This is illegal in CSS. It should be written:


.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
z-index: 45;
}
body {
background: url(http://free.pages.at/lifeisbutadream/missu/image/satinblue.jpg);
}Notice the difference in the position of the braces.

Mike

Peppy
02-02-2005, 04:10 PM
Thank you, thank you a thousand times http://www.cosgan.net/images/smilie/liebe/d010.gif

I - or better we - did it finally!http://www.cosgan.net/images/smilie/froehlich/k055.gif

Maybe I'll be back one day! http://www.cosgan.org/images/midi/liebe/a015.gif

Bye!
http://www.cosgan.net/images/smilie/froehlich/g020.gif

mwinter
02-02-2005, 05:43 PM
Thank you, thank you a thousand timesYou're most welcome. :)

Mike