469,623 Members | 1,407 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,623 developers. It's quick & easy.

leaving a shaddow / image trail with a tooltip



Hi all,

Odd question / problem: I'm using a tooltip fom the "Dynamic Drive
DHTML code library (www.dynamicdrive.com) - v-cool" - (snipits that are
relevant trimed for readability and included below). I want to be able
to drag the tooltip image (this is working fine) BUT leave a copy
behind as I drag.

ie. if you drag slowly, you just get a solid tooltip sized line behind
the object. Any idea how this can be achieved?

Regards

Eadmund
##### the javascript bit ###

if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;

//position the horizontal position of the menu where the mouse is
positioned
tipobj.style.left=curX+offsetxpoint+"px";

tipobj.style.top=curY+offsetypoint+"px";
tipobj.style.visibility="visible";
}

## the bitthat calls it in HTML body ####
<script type="text/javascript">
if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] :
document.getElementById? document.getElementById("dhtmltooltip") : "";
document.onmousemove=positiontip;

</script>

Dec 27 '06 #1
2 1482
Ea*****@letterbee.com wrote:
Hi all,

Odd question / problem: I'm using a tooltip fom the "Dynamic Drive
DHTML code library (www.dynamicdrive.com) - v-cool" - (snipits that are
relevant trimed for readability and included below). I want to be able
to drag the tooltip image (this is working fine) BUT leave a copy
behind as I drag.

ie. if you drag slowly, you just get a solid tooltip sized line behind
the object. Any idea how this can be achieved?
Use setTimeout to repeatedly call a function that leaves clones of your
drag image behind. Once you've created a max of say 6 or 8, move the
last one to the current position. Keep increasing the zIndex by 1 so
they stack properly. Once you stop dragging, the function removes the
images until none are left.

Use such effects sparingly, the "ooh ahh" factor is usually very
short-lived. Unless it actually improves the functionality of the
site, most visitors will find them annoying after a few moments. You
might like to provide an option to turn the effect off and see how many
users take advantage of it.
[...]
>
##### the javascript bit ###

if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
Replace the browser sniffing junk with feature detection. Do you
really want this to work *only* in IE and Navigator 6? In cases like
this, it is best to do the feature detection up-front and create a
'cursorPosition' function based on the result. That way you do it just
once and everything runs that little bit more smoothly.

--
Fred

Dec 28 '06 #2

Fred wrote:
Ea*****@letterbee.com wrote:
Hi all,

Odd question / problem: I'm using a tooltip fom the "Dynamic Drive
DHTML code library (www.dynamicdrive.com) - v-cool" - (snipits that are
relevant trimed for readability and included below). I want to be able
to drag the tooltip image (this is working fine) BUT leave a copy
behind as I drag.

ie. if you drag slowly, you just get a solid tooltip sized line behind
the object. Any idea how this can be achieved?

Use setTimeout to repeatedly call a function that leaves clones of your
drag image behind. Once you've created a max of say 6 or 8, move the
last one to the current position. Keep increasing the zIndex by 1 so
they stack properly. Once you stop dragging, the function removes the
images until none are left.

Use such effects sparingly, the "ooh ahh" factor is usually very
short-lived. Unless it actually improves the functionality of the
site, most visitors will find them annoying after a few moments. You
might like to provide an option to turn the effect off and see how many
users take advantage of it.
[...]

##### the javascript bit ###

if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;

Replace the browser sniffing junk with feature detection. Do you
really want this to work *only* in IE and Navigator 6? In cases like
this, it is best to do the feature detection up-front and create a
'cursorPosition' function based on the result. That way you do it just
once and everything runs that little bit more smoothly.

--
Fred
Thanks for the quick turn arond Fred. I'd actually got somewhere with
clone object to achieve the same effect. What I'm actually doing here
is not a drag effect, but an attempt at a simple get-around to the lack
of canvas in IE

I am trying to capture a users signature (not digital, but as in
signarture at bottom of letter - From Joe Blogs (UK) / John Doe(US) ).
By dragging an image that is only a few pixels square and leaving a
trail, I can let the user "sign" in a box, using a mouse as a pen, and
capture the series of x-y positions that make up the line.

The next step would be to get that in to an image format!! How I dothat
I' hav'nt started thinging about yet, but I'll probably do it in perl
back on the server, as I bet javascript does not have the
functionality.

Thnaks again,

Eadmund

Dec 28 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by luckyjameel | last post: by
9 posts views Thread by SteFetS | last post: by
9 posts views Thread by Maxi | last post: by
1 post views Thread by www.web20developers.com | last post: by
omerbutt
3 posts views Thread by omerbutt | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.