在Firefox中DIV中包含图片时层叠的问题?
我在项目中遇到一个这样的问题,那就是对Flash的广告进行点击统计。我的实现方式是通过捕获浏览者对Flash广告的点击事件,就是说要触发Onclick事件或onMouseUp或onMouseDown等事件,但问题就是那是Flash,且是由用户添加的,不太好要求用户对添加的Flash提供相关的事件来触发客户端的一个AJAX的异步请求。后来想了好久还是觉得在HTML页面上通过DIV层来控制实现统计业务数据的获取。
思路是:把Flash广告放到一个DIV层中,把此层标志为div_1,再在div_1上层叠一个DIV的层,将此层标志为div_2,此层中放的是一张透明的图片。div_2覆盖div_1,给div_2添加onClick事件和链接,当浏览者点击看到的Flash时,实际点击的是覆盖在上面的div_2里的透明图片(本不想用图片,但不用图片时,当把鼠标放上去时,就如div_2不存在一样),实现了Javascript的onClick事件的触发和广告的定向。这个在IE浏览器中已经实现了,没问题,但,用Firefox打开,问题就来了,那div_2还是覆盖在div_1上,不过div_2里的那张透明图片就被挤到右边来了!鼠标放到Flash上点击就不能触发div_2里的onClick事件了。找了许多的资料也没有解决掉这个浏览器之间的不同显示问题!!!感觉挺郁闷的:-(
示例代码如下,请高人指点!
<div style= "position:relative; ">
<div style= "position:absolute;z-index:0; left:10px; top:10px; width:287px; height:150px; ">
<OBJECT classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase= "download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 " WIDTH= "287 " HEIGHT= "150 ">
<PARAM NAME=movie VALUE= "http://oss.org.cn/uploads/solarisdvd.swf ">
<PARAM NAME=quality VALUE= "high ">
<param name=wmode value= "transparent ">
<EMBED src= "http://oss.org.cn/uploads/solarisdvd.swf "
PLUGINSPAGE= "www.macromedia.com/go/getflashplayer " type= "application/x-shockwave-flash ">
</EMBED>
</OBJECT>
</div>
<div style= "cursor:hand; position:absolute; left:10px; top:10px; width:287px; height:150px; z-index:1; visibility: visible; ">
<a href= "javascript:alert( '广告定向 '); ">
<img src= "http://192.168.0.102/images/transparent.gif " width= "287 " height= "94 " border= "0 " onClick= "javascript:alert( '啊!我被click了!!! '); ">
</a>
</div>
</div>
------解决方案--------------------我也遇到过同样的问题,期待高人指点。
------解决方案--------------------图片 style= "postion:absolute " 看看
------解决方案--------------------图片不是被挤到右边,而是被flash盖住了,因为object默认是最高层,试试下面的代码:
<div style= "width:287px; height:150px; ">
<OBJECT type= "application/x-shockwave-flash " WIDTH= "287 " HEIGHT= "150 " style= "position:absolute;z-index:0;top:10px;left:10px; " data= "http://oss.org.cn/uploads/solarisdvd.swf ">
<PARAM NAME= "movie " VALUE= "http://oss.org.cn/uploads/solarisdvd.swf ">
<PARAM NAME= "quality " VALUE= "high ">
<param name= "wmode " value= "transparent ">
</OBJECT>
</div>
<div style= "cursor:hand; position:absolute; left:10px; top:10px; width:287px; height:150px; z-index:5; visibility: visible; ">
<a href= "javascript:alert( '广告定向 '); ">
<img src= "http://192.168.0.102/images/transparent.gif " width= "287 " height= "94 " border= "0 " onClick= "javascript:alert( '啊!我被click了!!! '); ">
</a>
</div>