在部分透明图像上单击透明区域

Question

Given some shape, I would like it to be clickable on its filled parts, and not clickable (thus clicking through to the element behind it) on its transparent parts. Here's an example of a triangle shape: http://img138.imageshack.us/img138/1276/e4t.png

Black lines are bounding box lines. I would like to be able to select text, or interact with any element that is within bounding box (green-outlined areas), but not covered with the filled part.

I tried SVG with pointer-events set to every possible value, but it does not seem to work. Preferred solution would make us of html5, css and png image, but every working solution is welcomed.

Answer 1

You can add style property

pointer-event:none

to Image it will help you out through the image

Note: it will work only to modern browsers