穿透层的问题，如解决另一个百分贴一起结！

Question

<style>
#mask{
width:700;height:700;
background-color:green;
position: absolute;
left:0;top:0;
filter:alpha(opacity=10);
}
</style>
<iframe src="http://www.baidu.com" width="600" height="300" style="position: absolute;"></iframe>
<div id="mask"></div>
目的让iframe中的百度页面中的
新闻,网页,贴吧,知道,MP3,图片,视频链接 和 百度一下 按钮可以点！
就相当于mask这个遮盖的层不存在一样。（我运行的环境是IE7）如果解决立刻结贴，另外一个百分贴:
http://topic.csdn.net/u/20090331/10/b8122063-20d4-4edc-8d3e-b9d55b198343.html

Answer 1

建议使用Ajax  当然iframe也可以
<style type="text/css">
<!--
.btnOFF{padding:3px;border:1px outset;cursor:pointer;background-color: #ffffee;width:100px;height:16px;text-align:center;}
.btnON{padding:3px;border:1px inset;background-color: #CCCC33;width:100px;height:16px;text-align:center;color:red;}
-->
</style><script language="JavaScript">
<!--
function setEffect(link_id)
{
var i;
for(i=0;i<link.length;i++)
{
if(i != link_id)
{
link[i].className = "btnOFF";
}
else
{
link[i].className = "btnON";
}
}
}
//-->
</script><p align=center><span id="link" class="btnOFF" onclick="setEffect(0)">Google</span><span id="link" class="btnOFF" onclick="setEffect(1)">Baidu</span><span id="link" class="btnOFF" onclick="setEffect(2)">Sina</span><span id="link" class="btnOFF" onclick="setEffect(3)">Sohu</span><span id="link" class="btnOFF" onclick="setEffect(4)">CSDN</span><span id="link" class="btnOFF" onclick="setEffect(5)">Webjx</span></p>

Answer 2

这样算嘛 :)
<style> 
#mask{ 
width:700;height:700; 
background-color:green; 
position: absolute; 
left:0;top:0; 
filter:alpha(opacity=10); 
} 
</style>
<iframe src="http://www.baidu.com" width="600" height="300" style="position: absolute; left:0; top:0; filter:alpha(opacity=10); z-index:100"> </iframe> 
<iframe src="http://www.baidu.com" width="600" height="300" style="position: absolute; left:0; top:0"> </iframe> 
<div id="mask"> </div> 

Answer 3

5楼的是改变z-index了啊,不行的

Answer 4

不改变z-index情况下只能模拟点击事件

Answer 5

不明白楼主意思？
你难道是想下面放baidu上东西，上面用个东西遮起来，让别人一点就会打开baidu的链接。
如果这种东西让人很讨厌

Answer 6

MARK层上面放可以点击的任意标签快就可以了
一个标签快的ONCLICK事件 调用 下面被遮盖的事件
剩下的就是 把标签快换成和MARK一样的颜色 还有就是位置大小调整

Answer 7

你代码里的z-index我没动
只是加了个iframe 我设置的是后加我这个iframe的z-index

Answer 8

你想要骗取点击，或者做类似的事情？在技术的层面上，我可以告诉你怎么做：直接把你要骗取点击的页面放上面，例如baidu.com，并设置为完全透明；然后把你用于骗取点击的图片或页面放下面，让用户以为他们在点击下面的内容。

Answer 9

谁说我要骗取点击了？晕，我发现我根本说不清楚了，而且竟然没人能理解。我iframe 百度只是一个例子，实际上我是iframe自己站的一个页面，iframe页面包含了一些图，点图可以链接到其他地方。
这个iframe前面有个半透明的文字介绍div,因为美观考虑我必须将这个div于iframe重叠，
因为这个div是纯文字性质的，只是介绍，但是挡住了下面的图的链接，导致下面的图没法点了。
所以我想可以“穿透”这个div,只是显示文字介绍就可以，不影响我点下面的图。不知道各位能否明白。

Answer 10

我画了个图，大家看看
http://clip2net.com/clip/m10494/1238912236-clip-63kb.jpg

Answer 11

想到一个办法:MOUSEON的时候DIV不显示,这样不是可以直接点图连接了?当MOUSEOUT,恢复DIV的显示.
也只是个折中的办法啦.

Answer 12

//比起这种,我更讨厌你这种回答,技术就技术,还搞什么大道理,有本事你先贴方法,在来讨论事情的好坏
你这种想法,用纯css完全没有办法实现,只要图层有background值,那么他就是一个完整的长方形形式的块,就算他半透明,却实际存在了的
另外考虑到另一点,就是被拦iframe中的内容因该是无法预见的,所以又导至你使用js都无法达到你所需要的效果最后只有一个方法,那就是给iframe框架进行整体的透明设置,不过这个好像以现有css无法做到一样,我曾经在金山联盟看到过个效果,就在iframe框架进行了整体页面百分比缩放效果,那个不知道现在还存在不,不过可以上百度或其它地方找找相关资料

Answer 13

看了图有点想法:可以把图放在上面一层,背景设为透明,而TEXT放在下面一层?
所以做三层,第一层纯背景,第二层透明背景的TEXT,第三层就是图片,这样滑动滚动条,其实滚动的是第二层的DIV,然而点击的却是第三层的图片.
仅仅是想法,三层可以做吗?

Answer 14

目前我就是被这个“冒泡事件”困扰。这个展现内容的层不局限于iframe
div无法传递事件给同层或者非父层。我在一个游戏里看到他实现了。但不知道如何做到的。测试帐号：
http://sg.dipan.com/
帐号yayaha123 密码 123456
登录后地址转到 http://sg17.dipan.com/login
即可进入游戏后点『地图』，可以看到左下方的文字聊天区域不会遮住下面的地图，鼠标移动到被遮住的建筑上同样可以触发事件。我不知道他是如何实现的。如果弄清楚了，和这个百分贴一起结
http://topic.csdn.net/u/20090331/12/387d9297-3da6-4074-87a1-6e8f2557882f.html
谢谢各位！ :))

Answer 15

该页的做法是：
最外面有个
<div id="hot" class="hot" style="cursor: default;">
<img height="540" width="990" usemap="#area" onmousedown="return false;" src="http://3gmap.dipan.com/Statics/Images/v.gif" style="border: 1px solid white;"/>
<map id="area" name="area" style="border: 1px solid white;">
<area onclick="Dipan.SanGuo.Map.ShowTents(0,1584695);" onmouseout="Dipan.SanGuo.Map.HideItemDetail()" onmouseover="Dipan.SanGuo.Map.ShowItemDetail(0,2)" onmousedown="return false;" coords="136,215,181,179,226,215,182,251" shape="poly"/>
<area id="a_0_1570258_1" onmousedown="return false;" coords="899,37,944,1,989,37,945,73" shape="poly"/>
<area...../>
</map>
</div>
其次才是你所说的那个半透明层
底下才是游戏画面，
所有click/mouseover/mouseout都是在area上，
每次拖动后，area会重新定位或生成。用一个debug工具看下就知道了

Answer 16

 
全部遮挡的 好解决  部分遮挡的不好解决<html>
<head>
<style>
#mask{
width:600;height:300;
background-color:#ccc;
position: absolute;
left:0;top:0;
filter:alpha(opacity=80);
border:1px #000 solid;
}
#mask2{
width:600;height:300;
background-color:#ccc;
position: absolute;
left:610;top:0; 
border:1px #000 solid;
} 
</style>
</head>
<body style="padding:0px;margin:0px">
<iframe src="http://www.baidu.com" style="width:600;height:300;" ></iframe><iframe src="http://www.baidu.com" width="600" height="300" style="position: absolute;z-index=2;filter:alpha(opacity=20);margin-left:10px"></iframe>
<div id="mask"></div>
<div id="mask2"></div>
</body>
</html>