How to make HTML underneath overlapping Flash accessible

Question

I have a Flash header with a transparent background contained inside of a relative positioned div with a z-index of 10. The resulting effect allows my Flash movie with a transparent windowmode to overlap and hover over the HTML content. Unfortunately, the HTML that is underneath the invisible Flash is not accessible. For example, the anchors will not work. An example can be found here. Notice how the very top of the anchor links don't activate the hover state? I've seen Flash rollovers overlapping HTML content before,and the HTML still worked like normal... What am I doing wrong?

Answer 1

As far as I know, there is no way to prevent this. Overlapping transparent images and Flash have no way of doing per-pixel click-through. You have two options, make the entire site Flash, or get creative with the HTML.

For example, your "gear" buttons could be split up in to two parts; an underlying image that has a lower z-index than the Flash header, and the <a> tag can be given a higher z-index so the actual clickable area of the link is hovering invisibly over everything else.

To do this you'll need to take a few things into consideration:

• the <div> is responsible for housing the image, you could use an <img> or a background-image style.
• the <div> and <a> tags must be separate, not nested within a container
• the <a> must be styled with display:block; so that it can be given a width and a height
• the <div> and <a> must be the same height and width
• you'll probably want to use absolute positioning to get them overlapping correctly