capture onclick event below an image

[Zarkas]

Hello

Ran into a little problem today that I was unable to find a solution
to, so hoping someone help might be able to help.

I got a picture slideshow running below a semi transparent image, but
I need to be able to click on the images below the transparent one.
Basicly what I need is to make the onclick even ignore the transparent
image and work as it wasn't there, is this somehow possible? Or any
other way to get around this problem?

Best regards,
Mic

 

[Martin Honnen]

Ran into a little problem today that I was unable to find a solution
to, so hoping someone help might be able to help.

I got a picture slideshow running below a semi transparent image, but
I need to be able to click on the images below the transparent one.
Basicly what I need is to make the onclick even ignore the transparent
image and work as it wasn't there, is this somehow possible? Or any
other way to get around this problem?

This is not a Javascript problem. I don't think what you want is
possible with HTML. SVG has
http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty so there
you can define (statically within the markup or dynamically with script)
that an element does not receive pointer events.

 

[Evertjan.]

Zarkas wrote on 20 sep 2009 in comp.lang.javascript:

Ran into a little problem today that I was unable to find a solution
to, so hoping someone help might be able to help.

I got a picture slideshow running below a semi transparent image, but
I need to be able to click on the images below the transparent one.
Basicly what I need is to make the onclick even ignore the transparent
image and work as it wasn't there, is this somehow possible?
No.

Or any other way to get around this problem?

Certainly. It is not a problem.

It is similar to:
"How do I get wet if it does not rain?"
Answer:
"Just use a shower, a glass of water or the ocean"

Just onclick the transparent img.

 

[Martin Honnen]

Zarkas wrote:

This is not a Javascript problem. I don't think what you want is
possible with HTML. SVG has
http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty so there
you can define (statically within the markup or dynamically with script)
that an element does not receive pointer events.

It seems that Mozilla and WebKit developers are working on adding that
CSS property to HTML elements as well:
https://developer.mozilla.org/en/CSS/pointer-events suggest that Firefox
3.6 will support that.
Safari 4 (tested on Windows XP) already seems to support that as after

var div1 = document.createElement('div');
div1.id = 'div1';
div1.style.height = '200px';

div1.style.backgroundColor = 'lightgreen';
div1.onclick = function(evt)
{
alert(evt.target.id);
};
var div2 = document.createElement('div');
div2.id = 'div2';
div2.style.pointerEvents = 'none';
div2.style.height = '100%';
div2.style.width = '100%';
div2.style.backgroundColor = 'lightblue';
div1.appendChild(div2);
document.body.appendChild(div1);

when I click in the blue rectangle I get 'div1' as the id of the
event.target.

 

[Zarkas]

Thanks for your suggestions, much appriciated.
SVG doesn't seem to be an option in this case as I don't have server
access to the site to install svg web library and most of the people
watching the page will most likely be using Internet explorer 7 and 8.
Was looking a bit for something like your last example Martin, that
would also work in IE, seems to be working nicely in firefox though.

Evertjan, the problem is that the pictures below the transparent image
are moving, so I need to find out which one he would actually had
clicked on, had it just been one picture, the onclick even for the
transparent one would have been possible to use.

-Mic

 

[Thomas 'PointedEars' Lahn]

I got a picture slideshow running below a semi transparent image, but
I need to be able to click on the images below the transparent one.
Basicly what I need is to make the onclick even ignore the transparent
image and work as it wasn't there, is this somehow possible? Or any
other way to get around this problem?

You could try event dispatching: Dispatch the `click' event to the slideshow
container located lower on the z-axis. Its event listener then would need
to determine from the pointer's (relative) x- and y-coordinates which slide
the pointer is positioned over.


PointedEars

 

[Zarkas]

thank you PointedEars, you showed me in the right direction.
Got it working.
added a mouseclick event listner for the transparent image and in that
function made the transparent image hidden, got the proper image below
with the elementFromPoint function, showed the hidden image again and
called the click event on the new image object.
now just to tweak it so it also works in the other browsers.

 

[Thomas 'PointedEars' Lahn]

thank you PointedEars, you showed me in the right direction.

But why did you not follow it?

Got it working.

For fitting values of "working".

added a mouseclick event listner

There is no such event.

for the transparent image and in that function made the transparent image
hidden, got the proper image below with the elementFromPoint function,
showed the hidden image again and called the click event on the new image
object. now just to tweak it so it also works in the other browsers.

You are going to run into a race condition sooner or later.


PointedEars

 

[Zarkas]

A little new to all this event stuff in javascript, so couldn't get it
working with the dispatchEvent method, kept getting "object doesn't
support this property or method" on all elements i tried.

function listener1( evt )
{
var myElement=document.getElementsByName("imageContainer")[0];
if (myElement) myElement.dispatchEvent(ev );
}

 

[SAM]

Le 9/21/09 2:13 PM, Zarkas a écrit :

A little new to all this event stuff in javascript, so couldn't get it
working with the dispatchEvent method, kept getting "object doesn't
support this property or method" on all elements i tried.

function listener1( evt )
{
var myElement=document.getElementsByName("imageContainer")[0];
if (myElement) myElement.dispatchEvent(ev );
}

the argument is 'evt'
why do you then use 'ev' in the function ?

 

[Zarkas]

Le 9/21/09 2:13 PM, Zarkas a écrit :

A little new to all this event stuff in javascript, so couldn't get it
working with the dispatchEvent method, kept getting "object doesn't
support this property or method" on all elements i tried.

function listener1( evt )
{
var myElement=document.getElementsByName("imageContainer")[0];
if (myElement) myElement.dispatchEvent(ev );
}

the argument is 'evt'
why do you then use 'ev' in the function ?

typo, should be evt of course.