如何将HTML内容放置在Flash影片上方?


9

我正在使用的网站有Flash标头(使用swfobject嵌入它们)。现在我需要编写一些应该与Flash影片重叠的HTML代码。

我已经尝试在Flash元素的容器和(绝对定位)div上设置z-index,但它在Flash电影后面保持“消失”。

我希望有一个CSS解决方案,但是如果有一点JS魔术可以解决这个问题,我会为之付出代价的。

更新:谢谢,设置wmode为“透明”大多修复它。只有Safari/Mac仍然在第一场演出中将闪光灯隐藏在闪光灯后面。当我切换到另一个应用程序,并返回它将在前面。我可以通过将div的初始样式设置为display: none;来解决此问题,并在页面加载后在半秒内通过JS可见。

  0

你能放在一起工作的例子,因为我有同样的问题,能不要让它工作,它会很高兴看到它是我还是我的浏览器。 21 1月. 092009-01-21 16:31:57

20

请确保FlashVar“的wmode”设置为“透明”或“不透明”,而不是默认的,“窗” ......那么你应该能够使用CSS的z-index

+1

wmode就像一个埋葬在南美洲最深的丛林中的金色偶像。我记得我第一次听到它时欣喜若狂。 23 9月. 082008-09-23 21:13:20

+1

请记住,它不适用于Linux浏览器,除了Flash 10和最近的浏览器(Fx 3.0.0+,Opera 9)的测试版。50+,不了解其他人) 24 9月. 082008-09-24 05:46:37

+3

有多少Linux用户不会让他们的浏览器和相关程序保持最新?这是一个精明的人口统计学。 24 9月. 082008-09-24 16:22:25

  0

某些相当大的linux用户子集原则上也运行flash/swf查杀浏览器插件,所以我在开发时尽量不要过多担心它们。</semisnark> 29 9月. 082008-09-29 15:12:51

  0

它确实有效... 25 2月. 152015-02-25 13:18:32


4

后续up note:正如你在更新中发现的那样,让HTML显示在Flash之上目前是一个挑剔的命题,即使使用了JS魔法,你也应该期望Flash会阻止你的HTML用于一些使用脱机浏览器的浏览器,旧版本等等。

如果接触到任意大的浏览受众对您来说很重要(例如移动设备),那么重新设计您的内容以避免重叠可能会为您长期减少头痛。

  0

你当然是对的。在这种情况下,客户不关心,但一般来说,这是合理的建议。 24 9月. 082008-09-24 11:00:21

  0

然而,在这种情况下的另一个问题是有多少移动设备支持Flash?我相信iPhone可能是一些Windows Mobile智能手机,但在那之后呢? (另外,我对移动网络开发并不熟悉,所以我真的不知道......) 24 9月. 082008-09-24 16:21:36

  0

Steve:打倒那个,扭转它!大多数现代智能手机都支持Flash,除了iPhone外,其他都不支持。具体而言,大多数现代手机(即具有Web浏览器的手机)都具有Flash Lite,通常为2.x或3.x版本。 Flash Lite 2.x与Flash 6大致相似,Lite 3.x与Flash 8类似。 25 9月. 082008-09-25 03:21:44


0

设置 这个flash变量这样

s1.addParam("wmode","transparent"); 

然后 在div标签中使用这种风格

style="z-index:inherit; 

的问题将得到解决。


0

像史蒂夫保罗说,然后是当这样坐在你的闪光灯顶部的HTML呼吁更多的闪存乐趣的一部分...

哦,我们与那一个,其中涉及设置Z-乐趣指数实际上要低一些,以考虑到闪光的原因,这是蜜蜂的膝盖,因此必须始终处于顶峰。


1

我想补充一点,您必须记住在OBJECTEMBED标签中设置WMODE参数(“透明”)!

按照链接了解详细信息:在下面的风格 http://kb2.adobe.com/cps/142/tn_14201.html


1

使用的代码,它工作在Firefox和Chrome

<object id='myId' width='700' height='500'> 
      <param name='movie' value='images/ann/$imagename' /> 
      <param name='wmode' value='transparent' /> 
      <!--[if !IE]>--> 
      <object type='application/x-shockwave-flash' data='images/ann/$imagename' width='700' height='500' wmode='transparent'> 
      <!--<![endif]--> 
      <div> 
       <h1>Please download flash player</h1> 
       <p><a href='http://www.adobe.com/go/getflashplayer'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a></p> 
      </div> 
      <!--[if !IE]>--> 
      </object> 
      <!--<![endif]--> 
     </object>