web-dev-qa-db-ja.com

Adobe Flashが利用できない場合の代替画像の提供

ユーザーがAdobe Flashをインストールまたは非アクティブ化していない場合に備えて、代替のGIF/PNG画像を提供する方法はありますか？ JavaScriptを介してクライアント上にAdobe Flashが存在するかどうかを判断する、W3Cの次のような推奨事項を見つけました： W3C代替画像を提供しています

正直なところ、私は非JS手法を好みます。 <noscript>に相当するXHTMLタグを考えています。 （<noobject>のように、オブジェクト（この場合はFlash）を表示/ロードできない場合）。

この分離が必要な理由は次のとおりです。私が働いている銀行は、バナーをFlash形式で表示することが望ましいでしょう。それが不可能な場合は、簡単な画像を表示する必要があります。以前は、前述の方法で解決された可能性が非常に高いです。現在、デザインの更新に取り組んでいるところですが、このコードを偶然見つけたので、それが本当に最もエレガントで互換性のある方法なのか疑問に思いました。

私を打つ別のアイデア：JavaScriptが無効な環境で実際にFlashオブジェクトをロードすることは可能ですか？

htmlflash
17
Gerhard Dinhof

実際にはフラッシュがインストールされているが、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>
13
Kristian J.

次のコードを使用して、適切なデグラデーションを行います。それはうまくいきます。

<!--[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]-->
5
Raithlin

なぜJavaScriptを避けたいのかわかりません。Flashを扱う場合は、これが最善の解決策です。

SWFObjects Library （これまでのところ最もよく知られている）を使用すると、次のことができます。

<!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>

スクリプトが行うことは、splashintrodivをフラッシュファイルに置き換えることです。ブラウザがFlashをサポートしていない場合、何もせず、splash_noflash.pngが表示されます。

P.S。このテクニックを使用すると、青い立方体を表示する代わりに、画像が表示されます。

4
balexandre

ユーザーが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>
2
Sinju Moncy

トリックを行うためにインラインスタイルを使用していることがわかりました。

例えば：

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

私はCSSでこれを行う簡単な方法を書きました-追加のJavaScriptはまったくありません。

Flashムービーが存在するID /クラスに名前を付け、背景画像を使用します。 Flashムービーをそのdiv内にラップします。

例えば：

<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.

次にCSSで：

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

Flashが利用できない場合、たとえばiphone /パッドで、グラフィックが表示されます。これの唯一の欠点は、私が発見したことですが、Flashムービーが透明な背景を使用している場合、トランジションを通してaltグラフィックが表示されることです。最下層としてFlashムービー内で単色を作成し（Webサイトと同じbg色であることを確認してください）、問題なく表示されます。

〜グリースジャンキー

0
GreaseJunkie