Overlaying a transparent PNG over a SWF disables all click events in the SWF

Question

Hi all,

I'm trying to position a transparent PNG over a SWF movie through CSS (absolute positioning). But when I position the PNG directly over the SWF, all click actions on the SWF seem to be disabled. The SWF is asking to use your webcam, but you can't click any of the buttons. Check this link for an example. You can find the CSS here and the png here.

It's like the PNG acts as a overlaying plane you can't click through. I've tried some transparent properties in both the CSS and SWF, but nothing seems to work. Any ideas/suggestions/experience with this particular situation?

Thanks

Answer 1

AFAIR you cannot give swf actions if it's under another object , upper object will get all the clicks , you should edit oryginal swf or consider different graphics on page

Answer 2

Your suspicion is correct: the PNG is in a layer that's sitting right on top of your Flash piece and you cannot click through it.

Since you're just using that PNG for rounded corners, why not try the following:

1. Create 4 divs, one for each of the corners
2. In your stylesheet, give them absolute positioning, your PNG as a background image with background-repeat set to "no-repeat", and an explicit height and width that's the exact size of your rounded corner.
3. On a per-corner basis, use background-position to slide that PNG background into place.
4. Set the top and left attributes for each of your corners to snap them into place. (Since div#corners has absolute position itself, they'll sit in the right place.)

Basically, turn your corners into CSS sprites.

EDIT: You'll probably still run into problems with div#corners having an explicit height and width and acting as a layer. In that case, you might want to scrap it entirely and absolutely position the corners wrt div#corners's parent Element.