因为一般的FLASH网站中,都需要添加一个设为首页和添加收藏,添加收藏已经解决了,这些代码网上很多,就不在这里写出来,需要的朋友可以去Google.com搜索,本文讨论一下FLASH中如何设置首页。
设置首页问题,在网上搜索了不少,答案都是不准确的,始终没有找到很好的解决方案。不过自己用了一个小把戏来实现了FLASH设为首页,而且各个浏览器中均可以实现。
首先来看下效果
IE内核下:
FF下的截图:
(因为FF的安全性问题,所以必须请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true)
原理:
相信大家看那个那个覆盖在FLASH上面的黑色遮罩层,对,我的解决方案是,用层的相对来定位,当然这个工作不需要FLASH设计人员来实现,只要在场景里面有设为首页几个字即可,不需要添加任何AS代码。
层级默认的属性值都是static,静态。就不用多说了。最关键的是relative(相对)以及absolute(绝对)。
往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性 position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B"></div>
</div>
当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。
XHTML代码如下:
<div id="flashArea"> <div id="setArea" onclick="setHomepage();"></div> <object>中间为插入的FLASH</object> </div>
因为是相对于FLASH层来定位,所以一定要把要定位的层插入在FLASH层里面,这样他的父级DIV就是FLASH。
JS代码如下:
<script type = "text/javascript"> function setHomepage() { if (document.all) { document.body.style.behavior = 'url(#default#homepage)'; document.body.setHomePage('http://liupeng.us'); } else if (window.sidebar) { if (window.netscape) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { alert("该操作被浏览器拒绝,如果想启用该功能,请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true"); } } var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch); prefs.setCharPref('browser.startup.homepage', 'http://liupeng.us'); } } < /script>
这样是为了实现IE核心和非IE核心的兼容设置。
CSS代码:
上面不是已经看到了一个黑色填充的DIV块吗?设置成无色的话,这个层在IE下面就失效了,FF中还可行,所以才用了一种新办法,就是用透明层来实现。
#flashArea{ margin:0px auto; width:800px; height:600px; position:relative; z-index:99;} #setArea{ height:60px; width:60px; background-color:#000; position: absolute; top:150px; left:137px; z-index:1000; cursor:pointer;/*-moz-opacity:0;opacity:0;filter:alpha(opacity=0);*/}
在线演示地址(点击第一个FLASH按钮)