如何使重叠Flash下的HTML可访问 [英] How to make HTML underneath overlapping Flash accessible

问题描述

我有一个带有透明背景的Flash头文件，其中包含一个相对定位的div，z-index为10.所产生的效果允许我的Flash电影具有透明窗口模式，并将其悬停在HTML内容上。不幸的是，不可见的Flash下面的HTML是不可访问的。例如，锚点将无法工作。 示例可以在这里找到。请注意锚链接的最顶部如何不激活悬停状态？我已经看到Flash翻转之前重叠的HTML内容，和HTML仍然正常工作...我在做什么错了？

解决方案

<据我所知，没有办法来防止这一点。重叠透明的图像和Flash没有办法做每个像素的点击。你有两个选择，使整个网站Flash，或与HTML创意。

例如，您的齿轮按钮可以分为两部分，一个底层的图像比Z头索引更低，而< a> 标签可以被赋予更高的z-index，所以实际的可点击区域链接是无形地盘旋在其他的一切。

要做到这一点，你需要考虑一些事情：

您可以使用< img> 或 background-image 样式。 code>和< a> 标签必须是单独的，而不是嵌套在一个容器中

< a> 必须使用 display：block; 来设置样式，使其可以被赋予宽度和高度。 $ b

< div> 和< a> 必须是相同的高度和宽度

您可能想要使用绝对定位来正确地重叠它们。

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?

解决方案

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

这篇关于如何使重叠Flash下的HTML可访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！