Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Clicking through a transparent .png

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

like image 589
gpretty Avatar asked Jun 20 '10 19:06

gpretty


People also ask

Do PNG files allow transparency?

Raster file formats that support transparency include GIF, PNG, BMP, TIFF, TGA and JPEG 2000, through either a transparent color or an alpha channel.

Is PNG see through background?

If you are using a screenshot or a PNG image, it will default to have a transparent background. If you are using a JPG or other file format, you'll need to adjust your background color in the Snagit editor first or it will default to white rather than transparent.


2 Answers

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

like image 169
Guillaume Esquevin Avatar answered Oct 02 '22 00:10

Guillaume Esquevin


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

like image 43
Adam Crume Avatar answered Oct 02 '22 02:10

Adam Crume