Question

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

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.