Clicking through a transparent .png

Question

First off, I would like to say that myspace is a pain. But, musicians love it, and I can make some money doing layouts for them. I overlayed a layer of .png's over myspace's original look, but need to utilize the myspace music player. So, I made a picture frame that surrounds the myspace player that has a transparent center so you can see the myspace player. unfortunately, the player doesn't have full functionality. It seems to respond correctly when I hover, but not when I click. does anyone know how to solve this problem?

You can see what I'm talking about here: myspace.com/gprettydesigns

Solution 1

add

pointer-events: none;

on your overlay to alow click events to pass through it. It's a fairly recent property so not all browser may understand it.

More informations on pointer-events on https://developer.mozilla.org/en/css/pointer-events

Solution 2

The best way would generally be to slice the image up into pieces and place them so that nothing overlays the music player.

Comments

[alexanderpas]

Sadly the PNG is in a layer that's sitting right on top of your Flash piece and you cannot click through it.[1] A possible solution is, or to slice up the image so it doesn't cover the flash element, or try getting the flash object on top of the image (z-index comes to mind.) [1]:stackoverflow.com/questions/1001551/…

[Igor]

Thank you very much for your help :)!

[metaDesign]

Working on IE11