やんごとなき理由で、FLASHが表示できないプラットフォームにて代替画像を表示する必要に迫られました。
色々調べてみると、SWFObjectというJavascriptを使えば実現できる模様。
しかも代替画像の表示だけでなく、コードが驚くほどシンプルでスマート。
これはいい。
備忘録代わりの本エントリですが、わざわざ詳しく語る必要もないくらいメジャーな方法らしく、説明しているサイトも山のようにあります。
が、マニュアルを訳しつつ解説してくれているこのサイトが一番分かりやすかったです。
一応方法を記述しておきます。主に自分のために。
◆＜head＞内に下記を記述。
1 | <script type="text/javascript" src="swfobject.js"></script> |
上記でJavascriptを呼び出して、そのすぐ下に、下記のFLASH呼び出しスクリプトを書くだけ。
1 2 3 4 5 6 7 | <script type="text/javascript">
var flashvars = {};
var params = {wmode: "opaque"};
var attributes = {};
swfobject.embedSWF("ファイル名.swf", "呼び出したい部分のid", "width", "height",
"9.0.0","expressInstall.swf", flashvars, params, attributes);
</script> |
複数のFLASHを設置したい場合は、「swfobject.embedSWF」以下の部分をFLASHの数だけ記述すればOK。
「9.0.0」は再生に必要なFLASHプレイヤーのバージョンです。
widthとheghtには「px」は不要。
「var params = {wmode: “opaque”};」は、プルダウンメニューと同居する時に下に潜らせないためのおまじない。
プルダウンがない場合には、ソースはもっとシンプルになります。
呼び出しのスクリプトと合わせても、
1 2 3 4 5 | <script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("ファイル名.swf", "呼び出したい部分のid", "width", "height",
"9.0.0","expressInstall.swf");
</script> |
となります。なんてスマート。
ここまで＜head＞。
次に＜body＞内のFLASHを設置したい場所に、
1 2 3 | <div id="Javascript内に対応したid"> <p>代替画像のパス</p> </div> |
以上。
うーん、スマート。
