"ghost image" that lets events through to elements underneath

[Roger Shrubber]

I have a page with images that the user can drag from one frame to
another. I need them to see a "ghost image" of the image they are
dragging, while the original stays put. I use the onmousemove event
to keep the ghost image under the mouse pointer. There are three
problems:

(1) if the ghost image is dragged so it is partially off the edge of
the screen, scrollbars appear. This not only looks bad, it can cause
the page to autoscroll on IE, which means the image moves further,
which means the page scrolls more, which means... so I need the image
to be ignored for the purposes of working out how large the page is.
Is this possible?

(2) the ghost image should be directly underneath the mouse pointer,
but then it blocks events that should go to objects underneath it (the
objects the user is trying to drop it on). Moving it to one side
doesn't really help if the user moves the mouse quickly. I need the
ghost image to be ignored for event purposes. Is this possible?

(3) when the ghost image spans two frames (I use multiple ghost
images, actually), the frame border appears on top of it. I suspect
it is not possible to work around this ;-)

Thanks in advance for any help.

roger

[Kris]

In article <82*************************@posting.google.com> ,
ro**************@hotmail.com (Roger Shrubber) wrote:

I have a page with images that the user can drag from one frame to
another. I need them to see a "ghost image" of the image they are
dragging, while the original stays put. I use the onmousemove event
to keep the ghost image under the mouse pointer. There are three
problems:

(1) if the ghost image is dragged so it is partially off the edge of
the screen, scrollbars appear. This not only looks bad, it can cause
the page to autoscroll on IE, which means the image moves further,
which means the page scrolls more, which means... so I need the image
to be ignored for the purposes of working out how large the page is.
Is this possible?
Make the image unable to be dragged across a certain boundary.

(2) the ghost image should be directly underneath the mouse pointer,
but then it blocks events that should go to objects underneath it (the
objects the user is trying to drop it on). Moving it to one side
doesn't really help if the user moves the mouse quickly. I need the
ghost image to be ignored for event purposes. Is this possible?
Have you tried setting the ghost image for instance 50px left of the
mouse pointer (thus, the mouse is not covering it) and then offset the
image 50px to the right, using relative positioning (CSS)?

Don't know if that helps.

Make sure the new offset also works with the suggestion of the boundary
I did earlier.
(3) when the ghost image spans two frames (I use multiple ghost
images, actually), the frame border appears on top of it. I suspect
it is not possible to work around this ;-)

Don't use frames.

--
Kris
kr*******@xs4all.netherlands (nl)

[Kris]

In article <kr*****************************@news1.news.xs4all .nl>,
Kris <kr*******@xs4all.netherlands> wrote:

Make the image unable to be dragged across a certain boundary.

_outside_ a certain boundary, that is.

--
Kris
kr*******@xs4all.netherlands (nl)

[Ivo]

"Roger Shrubber" <ro**************@hotmail.com> wrote in message
news:82*************************@posting.google.co m...

I have a page with images that the user can drag from one frame to
another. I need them to see a "ghost image" of the image they are
dragging, while the original stays put. I use the onmousemove event
to keep the ghost image under the mouse pointer. There are three
problems:

(1) if the ghost image is dragged so it is partially off the edge of
the screen, scrollbars appear. This not only looks bad, it can cause
the page to autoscroll on IE, which means the image moves further,
which means the page scrolls more, which means... so I need the image
to be ignored for the purposes of working out how large the page is.
Is this possible?
Make it so there are always scrollbars, even without image
Make it so there are never scrollbars with body{overflow:hidden}
Making it so the image cannot be moved across a certain point may confuse
users if the target area leads them to think this is where they should go.
(2) the ghost image should be directly underneath the mouse pointer,
but then it blocks events that should go to objects underneath it (the
objects the user is trying to drop it on). Moving it to one side
doesn't really help if the user moves the mouse quickly. I need the
ghost image to be ignored for event purposes. Is this possible?
Would the user intend to fire an event on an object that he cannot see when
it is obscured by another object?
Don't drag an image. Drag a non-repeated background image (if pushing back
the z-index is not enough already).

(3) when the ghost image spans two frames (I use multiple ghost
images, actually), the frame border appears on top of it. I suspect
it is not possible to work around this ;-)
Don't use frames.
Don't use frame borders. Make your own.
IE5.5 allows chromeless popup windows. Put the iamge in one of those.
Transparancy is not supported.
Thanks in advance for any help.

roger

Must be quite some code if this is to be cross-browse.
Ivo

[Roger Shrubber]

"Ivo" <[e-mail]> wrote in message news:<3f***********************@news.wanadoo.nl>.. .

"Roger Shrubber" <ro**************@hotmail.com> wrote in message
news:82*************************@posting.google.co m...

I have a page with images that the user can drag from one frame to
another. I need them to see a "ghost image" of the image they are
dragging, while the original stays put. I use the onmousemove event
to keep the ghost image under the mouse pointer. There are three
problems:

(1) if the ghost image is dragged so it is partially off the edge of
the screen, scrollbars appear. This not only looks bad, it can cause
the page to autoscroll on IE, which means the image moves further,
which means the page scrolls more, which means... so I need the image
to be ignored for the purposes of working out how large the page is.
Is this possible?
Make it so there are always scrollbars, even without image
Make it so there are never scrollbars with body{overflow:hidden}
Making it so the image cannot be moved across a certain point may confuse
users if the target area leads them to think this is where they should go.

I agree about the boundary, since dragging the image from one frame to
another relies on the image being partly off the side of the frame.
And I can't remove the scrollbars altogether since the frame's
contents can be larger than the frame, so the user really needs to
scroll. The best option so far is the scrollbars are always present,
it is ugly that they change size as the user drags the ghost image,
but not much can be done about that I think.

(2) the ghost image should be directly underneath the mouse pointer,
but then it blocks events that should go to objects underneath it (the
objects the user is trying to drop it on). Moving it to one side
doesn't really help if the user moves the mouse quickly. I need the
ghost image to be ignored for event purposes. Is this possible?

Would the user intend to fire an event on an object that he cannot see when
it is obscured by another object?

The events are drop-target events. When the user moves the pointer
over an element, it gets a dragenter event (IIRC), which it can use to
highlight itself to say "you can drop the dragged image here". It
gets drop events when the user releases the button. But if the ghost
image is under the pointer, it gets all events. That means drag and
drop does not work.
Don't drag an image. Drag a non-repeated background image (if pushing back
the z-index is not enough already).
Not sure what you mean? The ghost image has to be on top of the other
images for the effect to work...

(3) when the ghost image spans two frames (I use multiple ghost
images, actually), the frame border appears on top of it. I suspect
it is not possible to work around this ;-)
Don't use frames.
Don't use frame borders. Make your own.

I thought of this, drawing a line that looks like a frame border is
easy, but it won't resize like a frame border...
IE5.5 allows chromeless popup windows. Put the iamge in one of those.
Transparancy is not supported.

Thanks in advance for any help.

roger
Must be quite some code if this is to be cross-browse.

Thankfully this part only needs to be IE.
Ivo

I have come up with a solution for this anyway using a totally
different approach. It only works when the web page is being
displayed in a larger application that is based on IE. My application
creates its own window and moves it around as the user drags. Since
this window is made by talking to the operating system, it is freed
from the consraints of HTML and javascript. So it is able to pass
mouse events straight through, as I originally wanted. And it does
not get a bar through it when it crosses frames!

Thanks anyway to those who offered suggestions.

[Richard Cornford]

"Roger Shrubber" <ro**************@hotmail.com> wrote in message
news:82*************************@posting.google.co m...
<snip>

Make it so there are always scrollbars, even without image
Make it so there are never scrollbars with body{overflow:hidden}
Making it so the image cannot be moved across a certain point
may confuse users if the target area leads them to think this
is where they should go.

I agree about the boundary, since dragging the image from one
frame to another relies on the image being partly off the side
of the frame. And I can't remove the scrollbars altogether since
the frame's contents can be larger than the frame, so the user
really needs to scroll. The best option so far is the scrollbars
are always present, it is ugly that they change size as the user
drags the ghost image, but not much can be done about that I think.

It is possible to get the illusion of dragging an object across frame
borders (at least in some of the major browsers (including IE) but it is
not simple. You need an absolutely positioned DIV with overflow set to
hidden, which contains another absolutely positioned DIV that contains
the image. And you need a copy of this structure in each frame. The
outer DIV is never moved off the client area of the frame so it never
induces changes in the scroll bars. When it buts up against the edge of
the frame instead of moving it further the inner DIV is offset to
continue following the mouse. The inner DIV is clipped by the outer DIV
so it also does not effect the scroll bars. To complete the illusion the
outer DIV in the next frame is lined up at the edge of its frame and
it's inner DIV offset to give the appearance of the clipped part of the
image appearing in the next frame.

Not a simple operation to explain or execute, but I posted an example
script that did this back in May (2003-05-19). If you go to
groups.google.com and use the advanced search to search the
comp.lang.javascript archives for a post with the subject "Re: Mozilla
window canvas location on screen" with the author "Richard Cornford" you
should be able to access that code to see how I did it. (Though that
code was quickly hacked together to demonstrate that it could be done,
so it could still stand some improvements.)

(2) the ghost image should be directly underneath the
mouse pointer, but then it blocks events that should go
to objects underneath it (the objects the user is trying
to drop it on). Moving it to one side doesn't really help
if the user moves the mouse quickly. I need the ghost
image to be ignored for event purposes. Is this possible?

This is just an idea (and I would hate to programme it, especially with
the DIV clipping code I described above) but suppose you split the image
up into 4 segments such that there was a hole where the point of the
mouse pointer went?

(best viewed with a fixed-width font)
-----------------------------
| |
| top segment |
| |
-----------------------------
---------- -------
| | | |
| left | hole |right|
| | | |
---------- -------
-----------------------------
| |
| |
| |
| bottom segment |
| |
| |
| |
-----------------------------

You could then animate all 4 DIVs around the mouse to give the illusion
of an image under the mouse but still leave the mouse interacting with
the underlying document. It would work best if your "ghost image" (and
DIVS) had transparent backgrounds so the hole did not stand out. And the
animation would have to be _very_ quick (plus you would have to watch
out for the mouse rolling over the DIVs if they did not move away
quickly enough).

Richard.