Fire an event through an element with a partially transparent background

Question

Hello there,

I got stuck with solving a seemingly easy issue.

http://jsfiddle.net/HAKvN/3/

By clicking the black box beneath the white bubble you're triggering an event causing an alert to be shown.

The white bubble represents a div with the red border indicating its boundaries. The bubble is a background image saved as a PNG file with an alpha channel.

I'm trying to fire an event by clicking over a transparent background within a box with the red border (this space is not occupied by the bubble itself) - is it even possible?

Answer 1

Someone please correct me if I'm wrong, but I do not believe what you want to do is possible with javascript. As far as the script is concerned the PNG is a square block. It has no awareness of the white speech bubble within the image.

If you want to do something like this, your best bet will probably involve an HTML5 canvas element.

Answer 2

Unfortunately I don't believe that can be done easily (maybe if you had all the coordinates in an array) an alternative would be something like this: http://jsfiddle.net/HAKvN/4/ (remove the borders to give a better rendering)

EDIT: a slightly better solution: http://jsfiddle.net/HjrCE/2/. The function is infoBoxSplit and can be called on any jquery object (eg: $('.infoCloud').infoBoxSplit(5);​). It takes one argument that specifies how large each piece should be in height (in this example 5px). The border is just there to demonstrate what is happening.