如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作

今天在写一个flash广告代码的时候,因为flash自带的链接,容易被当成弹出广告,所以做了一个div层放到flash上面,这样链接都是a触发的不会被拦截,但发现flash一直处于div层上面,原来flash需要加个参数才可以。

让flash置于DIV层之下的方法,让flash不挡住飘浮层或下拉菜单,让Flash不档住浮动对象或层的关键参数:wmode=opaque。

方法如下:

针对IE 在<object></object>内加上参数<param
name="wmode" value="opaque" />
针对FF 在<embed />内加上参数wmode="opaque"

脚本之家使用代码:

XML/HTML Code复制内容到剪贴板
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>22cn</title>
<style type="text/css">

<!--
body {
position:relative;
z-index:0;

margin:0; padding:0
}
body,td,th {
color: #333333;

}
*{margin:0; padding:0}
img{ border:0}
#jb51{
position:relative; width:300px; height:250px}
#div1 {

position:absolute;
left:0;
top:0;
width:300px;

height:250px; z-index:-1

}
#div2 {

position:absolute;
left:0;
top:0;
width:300px;

height:250px;
z-index:99999;
}
-->

</style></head>
<body>
<div id="jb51">

<div id="div1">
<script type="text/javascript">

document.write(‘<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="300" height="250">‘);
document.write(‘<param name="movie"
value="http://img.jb51.net/image/22cn_jb51net.swf" />‘);

document.write(‘<param name="quality" value="high" /><param
name="wmode" value="opaque" />‘);
document.write(‘<embed
src="http://img.jb51.net/image/22cn_jb51net.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="300" height="250"
wmode="opaque"></embed>‘);
document.write(‘</object>‘);

</script>
</div>
<div id="div2">
<a
href="http://i.am.cn/?s=jb51pic2" target="_blank"><img
src="http://img.jb51.net/image/touming.png" width="300"
height="250"/></a>
</div>
</div>

</body>
</html>
标准的的Flash插入

XML/HTML
Code复制内容到剪贴板
<!-- 标准的的Flash插入
设置高度与宽度:
width="400"
height="400"
设置路径:
data="style/flash/001.swf" 与
value="style/flash/001.swf"
替代文本或替代图片:
<a href=""
title=""><img src="" /></a> 也可以不要这段
-->

<object type="application/x-shockwave-flash" data="style/flash/001.swf"
width="400" height="400">
<param name="movie"
value="style/flash/001.swf" />
<a
href="style/flash/001.swf"><img src="style/img/001.jpg" alt="Flash动画"
/></a>
</object>
不会遮住层的Flash

XML/HTML
Code复制内容到剪贴板
<!-- 不会遮住层的Flash
让Flash不档住浮动对象或层的关键属性:

<param name="wmode" value="opaque" />
<embed
wmode="opaque"></embed>
-->
<object
type="application/x-shockwave-flash" data="style/flash/001.swf" width="400"
height="400">
<param name="movie" value="style/flash/001.swf" />

<param name="wmode" value="opaque" />
<embed
wmode="opaque"></embed>
<a
href="style/flash/001.swf"><img src="style/img/001.jpg" alt="Flash动画"
/></a>
</object>
透明的Flash

XML/HTML Code复制内容到剪贴板

<!-- 透明的Flash
让Flash透明的关键属性:
<param name="wmode"
value="transparent">
-->
<object
type="application/x-shockwave-flash" data="style/flash/001.swf" width="400"
height="400">
<param name="movie" value="style/flash/001.swf" />

<param name="wmode" value="transparent">
<a
href="style/flash/001.swf"><img src="style/img/001.jpg" alt="Flash动画"
/></a>
</object>
wmode 属性/参数值 Window | Opaque |
Transparent
模板变量:$WM,(可选)允许使用 Internet Explorer 4.0 中的透明 Flash
内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。

"Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML
层没有任何交互,并且始终位于最顶层。
"Opaque" 使应用程序隐藏页面上位于它后面的所有内容。
"Transparent"使 HTML
页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。
"Opaque windowless"和"Transparent
windowless"都可与 HTML 层交互,从而允许 SWF
文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明,因此,如果 SWF 文件的某一部分是透明的,则 SWF 文件下方的
HTML 层可以透过该部分显示出来,而"opaque"则不会显示。

如果忽略此属性,默认值为 Window。仅适用于 object

时间: 2024-10-10 22:09:59

如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作的相关文章

网页中创建音频、视频和Flash等多媒体:object元素

<object>元素:它主要用于定义网页中的多媒体,比如音频.视频.Java applets.PDF.ActiveX和Flash.Object标签是成对出现的,在object标签内可以使用param标签等.Object标签内除了param标签外,其它的内容将在浏览器不支持object标签时显示.注意,在HTML5尚未制定完成且普及时,最好使用flash在网页中播放音频和视频,以保证最大兼容性 Object标签的主要可选属性: type -> 被规定在data属性中指定的文件中出现的数据的

js动态删除div元素

在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) for(va

CSS3实现的div元素水平运动指定距离

CSS3实现的div元素水平运动指定距离:本章节分享一段,它实现了利用CSS3让div元素水平运动一段距离.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</

css控制div元素旋转指定角度代码实例

css控制div元素旋转指定角度代码实例:本章节介绍一下如何利用css3实现控制元素旋转指定角度的效果.在这里咱们就不考虑低版本的浏览器,因为随着时间的推移,低版本的浏览器会被逐渐淘汰,就算是当前,低版本浏览器的用户的占比也是很少了,下面直接看代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写JavaScript之前看到的效果: 实现后的效果图: 这个就是我们现在要做的效果. 1.背景: 我们在about.html页面中写了一个ul列表

每天一个JavaScript实例-从一个div元素删除一个段落

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-从一个div元素删除一个段落</title> <style> p{ padding:20px; margin:10px 0; width:

span元素和div元素的区别

span元素和div元素的区别:本章节简单介绍一下span元素和div元素的区别,因为这两个元素在布局中非常的常用,可以说几乎没有任何页面不适用这两个元素,下面就简单介绍一下它们两者的主要区别.一.元素的性质:span元素内联元素,而div元素是块级元素.关于两种类型元素的区别可以参阅什么是块级元素和内联元素一章节. 二.元素的使用方式:div元素主要是用作大的框架布局,而span元素则是主要用于对内容的修饰,比如颜色字体大小.代码如下: <!DOCTYPE html> <html>

hmtl 手机上 div元素 拖动

这是前端一个非常简单的功能,没什么复杂的原理:给div元素添加touch监听事件,然后改变div元素的位置状态. 下面是段简单的实现代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0" name="view

C# Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素

Html格式内容转Csv内容,包括table(重点在rowspan和colspan合并),p,div元素,table不能包含嵌套功能. 1 /// <summary> 2 /// Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素 3 /// </summary> 4 /// <param name="hrml"></param> 5 /// <returns></re