How do you click through transparent PNGs in IE9?

Question

So I would like to have a clickable area beneath a transparent PNG.

I have a 200x200px PNG image laying on top of a 200x300px div. The div is salmon colored. Only the 100px to the right of the div are clickable.

jsFiddle here: http://jsfiddle.net/xhAVU/1/

In modern browsers: By uncommenting pointer-events: none; you can see how the PNG gets ignored and the salmon div can be clicked on anywhere.

In IE9: No way to click through the image.

Is there a way to force IE9 to click through transparent PNGs?

Alternatively, can you put the transparent PNG inside the clickable div? Like this: http://jsfiddle.net/xhAVU/2/ — irrelephant, Aug 21 '12 at 05:03
possible duplicate of [css 'pointer-events' property alternative for IE](http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie) — mplungjan, Aug 21 '12 at 05:15
possible duplicate of [How to make Internet Explorer emulate pointer-events:none?](http://stackoverflow.com/questions/9385213/how-to-make-internet-explorer-emulate-pointer-eventsnone) -- see http://jsfiddle.net/xhAVU/3/ — ephemient, Aug 21 '12 at 05:21
@ephemient - your jsFiddle looks like the solution I was looking for. Thank you! — jack_overflow, Aug 21 '12 at 15:07

score 3 · Accepted Answer · edited May 23 '17 at 11:50

3

Dup of https://stackoverflow.com/a/10968016:

Replace

<img width="200" height="200" style="pointer-events: none" src="...">

with

<svg width="200" height="200" pointer-events="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" width="200" height="200"
      xlink:href="..." />
</svg>

as IE supports the SVG pointer-events property.

edited May 23 '17 at 11:50

Community

1
1

answered Aug 21 '12 at 15:52

ephemient

198,619
38
280
391

What happens when `http://www.w3.org/2000/svg` or `http://www.w3.org/1999/xlink` servers are down or not accessible? – Mai Feb 26 '15 at 04:30

score 0 · Answer 2 · answered Aug 21 '12 at 05:25

Did you tried sending png image back using a low z-index value lets say 10 and bringing the click able area up using high z-index value lets say 20.

This might work. look below code.

 .container {
    width: 500px;
    height: 500px;
    background-color: #eeeeee;
}
.container img {
    width: 200px;
    height: 200px;
    position: absolute;
    z-index:10;
   /* pointer-events:none; */
}

.clickable {
    width: 300px;
    height: 200px;
    background-color: salmon;
    cursor: pointer;
    z-index:20;
}

score 0 · Answer 3 · answered Aug 21 '12 at 05:26

If the PNG file could be moved into CSS, then I find that you could implement it this way in all browsers: http://jsfiddle.net/CkmH6/

With CSS:

.container {
    width: 500px;
    height: 500px;
    background: #eeeeee;
}
.overlay {
    background: url(http://ima.gs/transparent/none/36f/transparent-png-200x200.png) no-repeat;
    width: 200px;
    height: 200px;
    position: absolute;
}
.clickable {
    width: 300px;
    height: 200px;
    background-color: salmon;
    cursor: pointer;
}

How do you click through transparent PNGs in IE9?

3 Answers3