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 fuctionality. 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

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

Answer 2

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

Answer 3

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.)

Answer 4

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 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

Answer 6

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 7

I found the easiest way is to cut your .png's so that they don't completely overlap eachother. Here's an example http://www.tahoebasindefensiblespace.com/interactive.html .d It's several .png images used as links to display alternate text off to the side, and adjust color of each .png ring on rollover. It has it's limitations, and I haven't made the side text pretty, but the coding is simple and has several applications. You can right click on the page to view source.

here is where I learned to put the two together: meyerweb.com/eric/css/edge/index.html sohtanaka.com/web-design/css-sprites-wout-background-images/#blog