[摘要]这次给大家带来在HTML中怎样让Flash不遮挡div元素,在HTML中让Flash不遮挡div元素的注意事项有哪些,下面就是实战案例,一起来看一下。今天在写一个flash广告代码的时候,因为fla...
这次给大家带来在HTML中怎样让Flash不遮挡div元素,在HTML中让Flash不遮挡div元素的注意事项有哪些,下面就是实战案例,一起来看一下。
今天在写一个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"
脚本之家使用代码:
<!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插入
设置高度与宽度:
width="400" height="400"
设置路径:
data="style/flash/001.swf" 与 value="style/flash/001.swf"
替代文本或替代图片:
<a href="" title=""><img src="" alt="" /></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
<!-- 不会遮住层的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
<!-- 透明的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
关键词:在HTML中怎样让Flash不遮挡div元素