11

Very recently I asked this question on how to pass clicks through an element (e.g. full screen overlaying ). Received some good advice, but I still wondered which browsers supported this natively...

For those skipping the previous link, the overlay is purely cosmetic, must be overlayed and should ignore clicks (all mouse events should pass right through it)...

So far, I've only managed to get this working with WebKit browsers.

Works (Chrome and Safari 4): -
<image src='./images/75/75.overlay.blood.png' width='100%' height='100%' style='z-index: 3; position: absolute; top: 0; left: 0; pointer-events: none;' />

Firefox is known to support pointer-events with SVGs (and with other HTML elements in 3.6); problem is, I can't seem to get this to work with an SVG (e.g. xlink:href="overlay.24bit.8alpha.png").

Another way I hoped this could be achieved was by using XUL in HTML.

I'm hoping to use the attribute mousethrough="always" on the overlay (<image>, etc). Not working as of yet...

Oddly enough, Internet Explorer treats alpha opacity PNGs transparent areas as "click through" which is handy.

Any other good (or simple yet hackky) ways to achieve this in Firefox (3+). Pondered a Flash overlay with wmode="transparent" (fail).

Community
  • 1
  • 1
LeslieOA
  • 610
  • 2
  • 8
  • 18
  • Regarding Firefox, it seems the SVG mask effect could do the job (demo: - http://people.mozilla.org/~roc/mask.xhtml from http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html) with pages served (well, named) as .xhtml. Can I use PNGs as masks (I'll invert my overlay)? – LeslieOA Nov 17 '09 at 12:57
  • 1
    Also it's supported in FF 3.6 which is to be released fairly soon : https://developer.mozilla.org/en/CSS/pointer-events – lithorus Nov 17 '09 at 15:11
  • Thanks lithorus. The SVG route seems to be the best/only option I have. Any thoughts? – LeslieOA Nov 17 '09 at 19:04
  • Depends on your target audience, otherwise the SVG way seems to be the only option atm. – lithorus Nov 19 '09 at 08:43
  • 1
    Was there ever a more (cross-browser) definitive answer on this? – arxpoetica Jan 12 '11 at 16:46
  • @American Yak: - Maybe not "cross browser", but both WebKit and Gecko support this; Opera also, but only with SVG. Internet Explorer 7+ won't but IE9 may on release. – LeslieOA Jan 12 '11 at 18:50

1 Answers1

3

Try this jQuery solution: http://jsbin.com/uhuto

Works in Firefox, Chrome, iPad's Safari, and IE8 at least. The only issue I saw was that the overlay wasn't translucent in IE, but I assume that's something that can be overcome.

Another solution (used by an Ext JS plugin): http://www.vinylfox.com/forwarding-mouse-events-through-layers/ - uses Javascript to reforward the events.

Scott A
  • 7,745
  • 3
  • 33
  • 46