English 中文(简体)
如果没有 Adobe Flash,提供替代图像。
原标题:
  • 时间:2009-01-16 08:13:04
  •  标签:

Are there any ways providing an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated. I’ve found recommendations, like the following from W3C, which determine via JavaScript the existence of Adobe Flash on the client: W3C Providing alternative images

老实说,我更喜欢非 JS 技术。我正在考虑一些 XHTML 标签,相当于 <noscript>。(例如 <noobject>,如果对象(在我们的情况下是 Flash)无法显示/加载)。

The reason for needing this separation is the following: The bank I’m working for will preferably display their banners in Flash format. In case it isn’t possible a simple image should be shown. In the past it was solved very likely in the way mentioned before. We’re currently working on a design refresh and that’s where I stumbled upon this piece of code which makes me wonder if it’s really the most elegant and compatible way of doing so.

另一个想法让我震惊:在禁用JavaScript的环境中,实际上是否可能加载Flash对象?

最佳回答

实际上安装了Flash但关闭了JavaScript是一个有效的场景。这应该在大多数浏览器中工作。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
  <param name="movie" value="flash.swf" />
  <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
  <!--<![endif]-->
      <img src="(...)" alt="Put your alternate content here" />
  <!--[if !IE]>-->
    </object>
  <!--<![endif]-->
</object>
问题回答

我使用以下代码来进行优雅降级。它的效果很好。

<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="flash.swf" width="500" height="100">
<!-- <![endif]-->

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
    width="500" height="100">
  <param name="movie" value="flash.swf" />
<!--><!--dgx-->
  <param name="loop" value="false">
  <param name="menu" value="false">
  <param name="quality" value="high">
  <img src="flash_replacement.png" width="500" height="100" alt="No Flash">
</object>
<!-- <![endif]-->

我不知道为什么你想避免 JavaScript,它在处理 Flash 时是最好的解决方案。

使用SWFObjects库(目前最著名的库)你可以做到这一点:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title> My Home Page </title> 
 <meta name="viewport" content="width=780"> 
 <script type="text/javascript" src="swfobject.js"></script> 
</head> 
<body> 
 <div id="splashintro"> 
   <a href="more.html"><img src="splash_noflash.png" /></a> 
 </div>
 <script type="text/javascript"> 
   var so = new SWFObject("csplash.swf", "my_intro", "300", "240", "8", "#338899"); 
   so.write("splashintro"); 
 </script> 
 </body> 
</html>

脚本的作用是用闪存文件替换闪屏介绍 div,如果浏览器不支持Flash,则什么也不做,会显示闪屏无闪存.png

附注:通过此技术,您已经为iPhone做好了准备,不会再显示蓝色的立方体,而会显示图像:)

我发现使用内联样式可以做到这一点。

例如:

<div style="background-image: url( ... );">
    <object>
     /* Embedded Flash */
    </object>
</div>

如果用户未安装Adobe Flash并/或未激活,我们可以提供一个替代的GIF/PNG图像。

<object id="flashcontent classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550px" height="400px">
<param name="movie" value="mymovie.swf" />

<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mymovie.swf" width="550px" height="400px">
<!--<![endif]-->

<p>
Fallback or  alternate  content goes here.
This content will only be visible if the SWF fails to load.
</p>

<!--[if !IE]>-->
</object>
<!--<![endif]-->

</object>

并且也添加这个...

<script type="text/javascript">
swfobject.registerObject("flashcontent", "9", "/path/to/expressinstall.swf");   
</script>

I have written an easy way to do this in CSS - no extra JavaScript at all.

Name your ID/Class where your Flash movie resides and use a background image. Wrap your Flash movie within that div.

For example:

<div ID="MyFlashMovie"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
  <param name="movie" value="flashMovie.swf" />... etc., etc.</object>
</div> etc.

Then in your CSS:

#MyFlashMovie {
background: url("alternateGraphic.png");
background-repeat: no-repeat;
height: XXpx;
width: XXpx;
}

When the Flash isn t available, say on the iphone/pad, the graphic will display. The only drawback with this, that I have found, is that if your Flash movie uses a transparent background, you will see the alt graphic through the transitions. Just make a solid color within the Flash movie as your lowest layer (make sure it s the same bg color as the website) and it will look fine.

~GreaseJunkie





相关问题
热门标签