时光博客 - WEB开发中的可用性和用户体验

FLASH设为首页解决方案

因为一般的flash网站中,都需要添加一个设为首页和添加收藏,添加收藏已经解决了,这些代码网上很多,就不在这里写出来,需要的朋友可以去Google.com搜索,本文讨论一下FLASH中如何设置首页。

设置首页问题,在网上搜索了不少,答案都是不准确的,始终没有找到很好的解决方案。不过自己用了一个小把戏来实现了FLASH设为首页,而且各个浏览器中均可以实现。

首先来看下效果

IE内核下:

sp08.jpg

大小: 143.24 K
尺寸: 500 x 293
浏览: 379 次
点击打开新窗口浏览全图

FF下的截图:

(因为FF的安全性问题,所以必须请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true)

sethome.jpg

大小: 48.35 K
尺寸: 500 x 109
浏览: 343 次
点击打开新窗口浏览全图

sp09.jpg

大小: 104.92 K
尺寸: 500 x 261
浏览: 328 次
点击打开新窗口浏览全图

原理:

相信大家看那个那个覆盖在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代码如下:

  1. <div id="flashArea"> 
  2.     <div id="setArea" onclick="setHomepage();"></div> 
  3.         <object>中间为插入的FLASH</object> 
  4. </div> 

因为是相对于FLASH层来定位,所以一定要把要定位的层插入在FLASH层里面,这样他的父级DIV就是FLASH。

JS代码如下:

  1. <script type="text/javascript"
  2.  function setHomepage() 
  3.  if (document.all) 
  4.     { 
  5.         document.body.style.behavior='url(#default#homepage)'
  6.         document.body.setHomePage('http://liupeng.us'); 
  7.     } 
  8.     else if (window.sidebar) 
  9.     { 
  10.     if(window.netscape) 
  11.     { 
  12.          try 
  13.    {  
  14.             netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
  15.          }  
  16.          catch (e)  
  17.          {  
  18.     alert( "该操作被浏览器拒绝,如果想启用该功能,请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true" );  
  19.          } 
  20.     } 
  21.     var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components. interfaces.nsIPrefBranch); 
  22.     prefs.setCharPref('browser.startup.homepage','http://liupeng.us'); 
  23.  } 
  24. </script> 

这样是为了实现IE核心和非IE核心的兼容设置。

CSS代码:

上面不是已经看到了一个黑色填充的DIV块吗?设置成无色的话,这个层在IE下面就失效了,FF中还可行,所以才用了一种新办法,就是用透明层来实现。

  1. #flashArea{ margin:0px autowidth:800pxheight:600pxposition:relativez-index:99;} 
  2. #setArea{ height:60pxwidth:60pxbackground-color:#000positionabsolute; top:150px; left:137pxz-index:1000cursor:pointer;/*-moz-opacity:0;opacity:0;filter:alpha(opacity=0);*/

在线演示地址(点击第一个FLASH按钮)

«  上一篇 |  下一篇  »

赞助商广告

5 Responses

  1. Lin.x Says:
    2009-05-17, 6:56 PM

    能够将层置于flash之上,这才是我关注的。
    貌似object或者embed具有无限大的z-index,不做处理是遮不住它们。

  2. Kevin Says:
    2009-05-17, 11:27 PM

    是的,我用的是DW CS4,所以生成的FLASH代码里面含有<param name="wmode" value="opaque" >因为默认情况下在网页中添加的Flash在浏览器中是以窗口模式存在的,是独立于浏览器的HTML结构渲染的,所以这种情况下的Flash会遮盖住与它重叠的HTML。
    在Adobe Flash的发布设置里关于HTML的设置有一项是“窗口模式”,这里面提供了三个选项,分别是:窗口(window)、不透明无窗口(opaque)、透明无窗口(transparent)。

  3. tomogen Says:
    2009-05-23, 3:14 PM

    找个坑请教LIUPENG一个问题。
    现在我博客把背景固定在左上,在是要大分辨下看没什么问题,把浏览器缩小一下或者在1024的分辨率下看的话就会图片插到文字一直。我现在临时加了一个白色背景。但我用filter:alpha(opacity=70);把他设置成半透明时文字和图片同样会半透明掉。问题来了:如何把后面的背景和上面的内容区别开来透明不影响呢?

  4. 覆膜 Says:
    2009-06-16, 9:45 AM

    谢谢楼主分享了!

  5. dannysun Says:
    2010-05-11, 10:46 AM

    网站设计,对于FLASH,JS这类的东西能不能尽量不要用,于SEO不友好。影响排名。。

Leave a Reply





验证码(*):