473,225 Members | 1,338 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,225 software developers and data experts.

"ghost image" that lets events through to elements underneath

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
Jul 20 '05 #1
5 3016
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)
Jul 20 '05 #2
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)
Jul 20 '05 #3
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
Jul 20 '05 #4
"Ivo" <no@thank.you> 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.
Jul 20 '05 #5
"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.
Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: gojuka | last post by:
Hi All I have (what seems to be) a rather simple problem I'd like to solve using PHP with the GD library installed. I would like to "stitch" multiple images together so that they appear next to...
1
by: Jawahar Rajan | last post by:
All, I am using a few Input type of "Image" instead of a classic submit button in a form to achieve various tasks for example image1 - add user image2 - modify user image3 - delete user...
5
by: Roger Shrubber | last post by:
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...
8
by: al | last post by:
Hi, I've been trying to create a image mouseOver effect using CSS - is this possible? Or will I have to use DIV tags or something along those lines? I've tried a number of things - the code...
1
by: Dave | last post by:
Hi all, I was trying to make an image submit button with a rollover and discovered to my suprise that there is no way to access a form element of the "image" type. I tried specifying it by name...
1
by: zelnugget | last post by:
I'm using a fading image script that I found via Google Groups on this newsgroup, and am having some difficulty with it. First, here's a link to the Google Groups posting: ...
2
by: MiW | last post by:
Hi I'm making a kind of JavaScript-based library for creating SVG objects/elements. And I hit the wall... Every element (rect, circle etc.) can be created using *.createElement, then...
2
by: Mr.Clean | last post by:
If I have an Input of type image, it is not listed in the Forms elements when walking to DOM using MSHTML. Is this expected behaviour and how would I get the image input to submit the form NOT...
1
by: mmcc128 | last post by:
Currently using the "document.images" to "preload" images - not for future pages, but for the page being loaded. I got it from http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm Its a...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.