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

Answer 1

Put the background image on a div then use z-index to position it behind the player. The advantage of putting a background image on a div and using z-index is that it'll be faster than using an actual inline image.

Answer 2

Clap clap clap to you! I've done sone MySpace tweaking and know it's a real PITA.

Change the CSS here:

#shell {
    visibility:hidden;
    z-index:200;
}

I don't remember if this is feasible or if they only accept inline CSS.

Not really question related but now you can also have bandpages on facebook via RootMusic. MySpace will probably be overrun in no time so I would also give them a look.

Good luck dealing with the spaghetti tables of MySpace.

Answer 3

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

Answer 4

Maybe you could use z-index to position the image underneath the player, more on this here: http://www.echoecho.com/csslayers.htm

Answer 5

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