Email conversation
| From | Bala Fon |
|---|
| To | Me |
|---|
| Subject | multiple mouse trail question containing gnomes |
|---|
| Date | 1 December 2004 18:00 |
|---|
Hi!
I spent two days in the net before contacting you, gaining basic info about
javascript... Still, not an inch smarter. I'm a beginner, mind you, so
please forgive me if I ask stupid questions.
I have this friend who's making hand woven gnomes (oh yes!), and I promised
to make her web pages. I already managed to lure three 15x15px gnomes
follow the mouse with a nice, lazy delay - sounds silly but looks actually
quite cool in IE. But it does nothing in Mozilla, which is my browser. That
was with anoher script, only copy-paste and a few adjustments needed. If
the thing doesn't work with other browsers, it's useless. Your mouse trail
script seems to have a lot more potential , from what I can understand -
but I can't even get the beginnings right:
'Add the following lines just before the </body> tag', you say. I did, but
ended up with a page with lots of text where it shouldn't be. This, I know,
must be an elementary mistake, but I have no one who I can ask, and two
days in the net didn't help. So I haven't been even able to make it work
with letters, much less reached the point where I could have replaced the
letters with small images and adjusting their behaviour...
Help? Please?
I read your web design tutorials as well, by the way. Thanks. THAT I did
understand, and learned a lot !
Bala
| From | Me |
|---|
| To | Bala Fon |
|---|
| Subject | Re: multiple mouse trail question containing gnomes |
|---|
| Date | 1 December 2004 19:00 |
|---|
Bala,
Something like this should work. Make sure that the script and the picture are in the same folder as the page.
<script src="multitrail.js" type="text/javascript"></script>
<script type="text/javascript"><!--
createMouseTrail(
3, //number of trails
75, //speed of trails - 50-75 is about right - higher numbers are slower
'<img src="gnome.gif" height="15" width="15" alt="">, //trail picture
20, //x offset from mouse
2, //y offset from mouse
17, //x offset between trails
0, //y offset between trails
0, //elasticity (0 is none, 0.6 is about max)
false, //fixed speed - elasticity will be ignored
//all trails will move as fast as each other
'' //stylesheet for trails
);
//--></script>
Hope this is what you need
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Bala Fon |
|---|
| To | Me |
|---|
| Subject | Re: multiple mouse trail question containing gnomes |
|---|
| Date | 1 December 2004 21:51 |
|---|
Hi!
I'm beginning to see the light - what a relief, even my mozilla shows signs
of life! Big thanks.
Just one more detail, if I may: I actually have three different gnomes
(gnome1,2&3), so I want three different figures instead of one three times
following the cursor. How to add those two other guys in the line? I tried
just adding them into the same line with the first image, but that looked
really awkward.
I also figured out where to adjust the offset, elasticity etc., but didn't
find the correct speed/delay controls yet. I managed to make an earlier
version with another script where the guys followed with a really nice
delay, reacting lazily and sleepily to the cursor. Very 'gnomy'. Could you
give me a hint which numbers to toggle, please?
Once more: thankssss. You've been a big help. The gnome-lady is grateful
also.
Bala
| From | Me |
|---|
| To | Bala Fon |
|---|
| Subject | Re: multiple mouse trail question containing gnomes |
|---|
| Date | 2 December 2004 00:33 |
|---|
Bala,
Within this script, you can change the speed by altering 'speed of trails'
- this is the only way, and bigger numbers may start to look jumpy (small
sacrifice for a flexible script) - usually about 200 for slow movement, but
you might want to use 300 or 400.
As for separate images, replace this line:
'<img src="gnome.gif" height="15" width="15" alt="">', //trail picture
with this:
[
'<img src="gnome.gif" height="15" width="15" alt="">',
'<img src="gnome2.gif" height="15" width="15" alt="">',
'<img src="gnome3.gif" height="15" width="15" alt="">'
],
Notice the careful placements of quotes and commas.
Tarquin