473,320 Members | 1,930 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 1599
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: luckyjameel | last post by:
HI Friends Is it Possible to put a image in a tooltip if so how can i do that Regards Lucky
1
by: mphanke | last post by:
Hi, I would like to place an Icon on an Image. If the mouse is over this Icon, I want to display the associated text in a tooltip. How would I do this? Any ideas? My last request wasn't...
9
by: SteFetS | last post by:
Hi, I have a webapplication (asp.net) Snippet: Dim Img As New System.Web.UI.WebControls.Image Img.ID = "Image1" Img.ToolTip = "Trou" Img.ImageUrl = "http://localhost/images/0.bmp"...
9
by: Maxi | last post by:
There is a very good javascript available at the following link that displays image and text wherever mouse follows a link. http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm I have a...
1
by: www.web20developers.com | last post by:
http://www.web20developers.com http://www.web20developers.com/index.php?option=com_content&task=view... Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell AJAX -...
3
omerbutt
by: omerbutt | last post by:
hi there i have downloaded a prototype tooltip from http://www.nickstakenburg.com/projects/prototip/ the logic it uses is to call the script after creating the <div> for example i am using the...
8
mikek12004
by: mikek12004 | last post by:
1) Script Title: Rich HTML Balloon Tooltip 2) Script URL :http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm 3) Problem Description: See this page General Music for links you can...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.