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?
+1
A:
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 abackground-image
style. - the
<div>
and<a>
tags must be separate, not nested within a container - the
<a>
must be styled withdisplay: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
Soviut
2009-03-09 21:11:18
I am assuming under your method I could put the CSS background image on the div, instead of the anchor. Then I could use jQuery to change the CSS background-image of the div when the anchor is hovered over.
mikemick
2009-03-09 21:26:30
Exactly. Its not the prettiest solution since the html may not come out as clean, but just be sure to set titles on your href tags.
Soviut
2009-03-10 05:49:28