javascript 使用 HTML/CSS 无法使用 Flash 横幅时的替代图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5232801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternative image when flash banner is not available USING HTML/CSS?
提问by Jon Kyte
i'm looking for a solution to my problem, I have a site I have created for a client which features a flash header image, the only problem is he accessed a draft of the site on his iPhone and was put off by the fact it didn't display any of the head image as it was an iPhone (which as we know are not flash happy!). Also, I would need this anyway incase the visitor has flash turned off or uninstalled (I have provided the usual 'install flash' link when flash isn't displayed).
我正在寻找我的问题的解决方案，我有一个我为客户创建的网站，其中包含一个 Flash 标题图像，唯一的问题是他在他的 iPhone 上访问了该网站的草稿，但被它推迟了没有显示任何头部图像，因为它是一部 iPhone（据我们所知，它并不高兴！）。另外，无论如何我都需要这个，以防访问者关闭或卸载了 Flash（当没有显示 Flash 时，我提供了通常的“安装 Flash”链接）。
Is there a way I can do this with just HTML/CSS or will I have to use JS or something similar?
有没有办法只用 HTML/CSS 来做到这一点，或者我必须使用 JS 或类似的东西？
I have tried adding tags but this does nothing.
我试过添加标签，但这没有任何作用。
Here is my code if this helps anyone :).
如果这对任何人有帮助，这是我的代码:)。
<div id="container">
<div id="header"><a href="index.html"><img src="images/logo.jpg" width="214" height="50" alt="Tom Frost - Personel Trainer in Leeds, West Yorkshire" style="border:none;"/></a></div>
<div id="navigation">
<ul id="nav">
<li><a href="index.html" id="index">Home</a></li>
<li><a href="about.html" id="menu-about">About</a></li>
<li><a href="services.html" id="menu-services">Services</a></li>
<li><a href="testimonials.html" id="menu-test">Testimonials</a></li>
<li><a href="/blog/" id="menu-blog">Blog</a></li>
<li><a href="articles.html" id="menu-articles">Articles</a></li>
<li><a href="contact.html" id="menu-contact">Contact</a></li>
</ul>
</div>
<div id="title_box">
<embed src="images/flash.swf"
quality="high"
pluginspage="http://get.adobe.com/flashplayer/"
type="application/x-shockwave-flash"
width="960" height="450"
alt="images/header.jpg">
</embed></div>`
Obviously my flash image is in the title_box div.
显然我的 Flash 图像在 title_box div 中。
Thanks for your answers in advance, I had a look around the site but couldn't find a html answer to this. If js is the only way a simple link to the answer on this site or a tutorial on how to do it would be all I need.
提前感谢您的回答，我浏览了该网站，但找不到对此的 html 答案。如果 js 是唯一的方法，那么我只需要一个指向该站点上答案的简单链接或有关如何执行此操作的教程。
Thanks.
谢谢。
回答by detaylor
If you include the flash image using the objecttag instead of embedyou can put fallback content inside the tags. Some cross browser markup is explained at http://www.alistapart.com/articles/flashsatay. The gist of it is:
如果您使用object标签而不是包含 Flash 图像，则embed可以将后备内容放入标签中。http://www.alistapart.com/articles/flashsatay解释了一些跨浏览器标记。它的要点是：
<object type="application/x-shockwave-flash"
data="images/flash.swf"
width="450" height="960">
<param name="movie" value="images/flash.swf" />
<img src="images/header.jpg" />
</object>
回答by Ioannis Karadimas
You can use <noembed>..</noembed>although it's a bit deprecated. A better solution is to use the tag, and insert your alternative content inside the object's content, like so:
您可以使用，<noembed>..</noembed>尽管它有点不推荐使用。更好的解决方案是使用标记，并在对象的内容中插入替代内容，如下所示：
<object>
<param name="" value="" />
<!-- more params... -->
<img src="images/noflash.png" />
</object>
Another way is to use the flash auto - generated script for player detection, although it requires understanding it a bit, first.
另一种方法是使用 flash 自动生成的脚本进行玩家检测，尽管它首先需要了解一点。
