Question

I have an embedded flash that is transparent so it looks like part of the background. I achieved that by setting wmode to transparent.

My problem is that the area underneath the flash becomes inaccessible, even though the flash is transparent. Therefore I cannot click on any links or buttons that are under the flash object.

How do I make the flash unobtrusive?

Clarifications:
– the flash is transparent but it has an animation that shows in the background.
– wmode set to transparent lets you click the contents underneath in IE but not Firefox.

Answer 1

The problem is that in your document, the object/embed that contains the Flash animation is on top of the elements you need to access. You need to put these elements on top of the Flash animation instead of the other way around.

The way to do this is to set the object’s wmode to opaque, and use the CSS z-index property to set it to a z-index lower than the z-index of whatever elements you want to float over it — you can do this in CSS or just with inline style='' attributes.

Here’s an example using SWFObject to create the object/embed tags, but the same principle applies if you are just hardcoding these into your HTML.