筆記-避免網頁元素被Flash"壓落底"

标签： Tips CSS | 发表时间：2011-08-23 22:42 | 作者：Jeffrey Amo
出处：http://blog.darkthread.net/blogs/darkthreadtw/default.aspx

平時寫網頁處理Flash(.swf)的機會不多，今天才發現網頁上的<div> <img>等元素，就算將z-index提高到99，還是永遠被壓在Flash下方。(如下圖左所示，swf檔借自交通部觀光局網站)

從同事身上學到一招: Flash物件有個wmode屬性，設為transparent時，除了可讓Flash背景變透明外，還可以改變其一律浮在任何物件上方的預設行為(參考來源，設為opaque亦可讓Flash參與HTML元素的層次排列)，使其改由z-index決定層次。如上圖右所示，經指定<param name="wmode" value="transparent” />後，z-index=99的半透明<div>就能浮在Flash物件的上方。

以下是測試用的程式範例:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" 
        src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js"></script>
    <style>
        #ref {
            position: absolute; z-index: 99; left: 30px;
            width: 50px; height: 500px;  background-color: #ff6666;
        }
    </style>
    <script>
        $(function () {
            $("#ref").css("opacity", 0.6);
        });
    </script>
</head>
<body>
<div id='ref'></div>
<div style="height: 100px">&#160;</div>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
        width="720" height="261" id="941.swf" align="middle">
    <param name="movie" value="http://taiwan.net.tw/images/1A/home1.swf"/>
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="movie_name.swf" 
            width="720" height="261">
        <param name="movie" value="http://taiwan.net.tw/images/1A/home1.swf"/>
    <!--<![endif]-->
    <param name="wmode" value="transparent" />
        <a href="http://www.adobe.com/go/getflash">
<img 
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
             alt="Get Adobe Flash player"/>
        </a>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>
</body>
</html>

【補充參考】

相关 [元素 flash] 推荐：

筆記-避免網頁元素被Flash"壓落底"

- Amo - 黑暗執行緒
平時寫網頁處理Flash(.swf)的機會不多，今天才發現網頁上的
等元素，就算將z-index提高到99，還是永遠被壓在Flash下方. (如下圖左所示，swf檔借自交通部觀光局網站). 從同事身上學到一招: Flash物件有個wmode屬性，設為transparent時，除了可讓Flash背景變透明外，還可以改變其一律浮在任何物件上方的預設行為(參考來源，設為opaque亦可讓Flash參與HTML元素的層次排列)，使其改由z-index決定層次.

Flash遮盖页面元素的解决方法

- - 我爱互联网
在做web开发中可能会遇到flash遮挡页面中元素的情况，无论怎么设置flash容器和层的深度(z-index)也无济于事，现有的解决方案 是在插入flash的embed或object标签中加入”wmode”属性并设置为wmode=“transparent”或”opaque”，但 wmode属性到底是什么意义，为什么可以解决这个问题呢.

flash存储器（NOR Flash和NAND Flash）

- - CSDN博客推荐文章
Flash存储器经历了最初应用于个人计算机BIOS( basic input output system)存储、嵌入式系统的标准存储器,到目前在某些笔记本电脑中代替磁盘作为外存储器，并被引入到企业级存储的高端存储阵列中，Flash存储技术已经得到很大的发展. 作为一种电可擦除可编程只读存储器，Flash存储器不但能在不移除存储芯片的情况下进行擦除和编程操作，还具有非易失性、固态性、体积小、重量轻、抗震动、高性能、低能耗等优点.

Flash之死

- - 技术改变世界 创新驱动中国 - 《程序员》官网
文 / Francisco Kattan. Adobe公司决定停止面向移动浏览器的Flash开发工作，但导致Flash最终失败的原因却不甚明朗. VisionMobile特邀作者Francisco Kattan撰文就导致Flash消亡的一连串事件进行了分析. 自Adobe宣布将停止开发面向移动浏览器的Flash以来，人们就展开了激烈讨论，很多Flash开发人员表示惊诧和怀疑，分析师们不停地放马后炮，甚至有人恳请Adobe辞退首席执行官.

如何禁用flash

- - 膘叔
本来是不想禁用的,但发现机器的风扇就一直没停过,CPU消耗的最大的就是firefox下的flash插件 .没辙了.我还是禁用它吧. 嗯flashblock即可,但其实我是想从软件的底层就直接禁用它.可惜没有好的办法....只能用插件了.网上类似的教程还有很多,比如这个:. 内容来源:http://orzl.com/weblog/disable-the-flash-on-mac.

Google Swiffy把Flash变成HTML5

- Caiwangqin - 36氪
由于Flash被苹果拒之门外，很多开发者在开发产品时都不得不在Flash和HTML5之间做出选择. 今天Google发布的一个新工具让天平再次偏向HTML5这边，它就是Swiffy. Swiffy可以把Flash文件转换成HTML5标准. 该项目源于Google移动广告团队，开发动机就是有些设备不支持Adobe的格式，因此无法显示Flash动画.

Flash与HTML5性能比较

- frocket - Solidot
Rinick 写道 "近日，一项评测向人们证明了：HTML5在性能上仍远远落后于Flashplayer. 测试使用了Droid X, Nexus One, Desire HD, Atrix, PlayBook, Galaxy Tab, Xoom 等设备，分别测试了位图，矢量图，数值运算，视频播放等项目.

HTML5&Flash之粗知浅见

- Neo - FeedzShare
来自: 网易用户体验设计中心官方博客 - FeedzShare  bullog.org - FeedzShare  . 发布时间:2011年08月03日,  已有 2 人推荐. 比较头大的是Flash又插入不进来了，无奈请您移步 点击这里 先去看一段动画展示：. HTML（Hyper Text Mark-up Language）即超文本标记语言.

Flash广告设计要素

- 二宝 - 所有文章 - UCD大社区
应上面要求，在内部做一个关于“banner“设计的分享. 搜了下，网上这类文章挺多，思来想去，决定这么干：1对前人的经验总结一下，2重点介绍一下flash 广告设计的要点. 投放在媒体的banner需要在最短的时间内给用户传递出最关键的信息，这就要求我们在设计之前一定要和需求方充分沟通,明确活动主题、重点、一定要求对方提交宣传文案、商品图.

Flash: 涅磐与重生

- chuang - 博客园-首页原创精华区
10月3号，Flash Player 11 和 AIR 3.0正式提供下载，一片安静. 最近这两年来，关于Flash的新闻一向是以负面为主，先是 Silverlight 的挑战，然后是 iphone和ipad的不支持及html5的良好预期，Flash 看似风雨飘摇，明灭不定. 我个人观点：Silverlight成不了Flash的竞争对手，主要原因是商业层面的原因.