swfファイルを簡単に埋め込めるswfobject.js

XHTMLにswfファイルを埋め込む時にすごく便利なのが本家サイト:deconcept ? SWFObject: Javascript Flash Player detection and embed scriptで紹介しているswfobject.jsです。

分かれば使い方はもの凄く簡単なので、解説をしたいと思います。

…ここからが続き

swfobject.jsの使い方

swfobject.jsへのパスをhead要素内に記述

<script src="js/swfobject.js" type="text/javascript"></script>

swfファイルを埋め込みたい部分に下記に記入しているのを入れて下さい。

<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>

それでは格コードの解説をさせて貰います。

<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

このflashcontentのdivに囲まれている部分はFlashムービーに置換されるので、Flashプラグインをインストールしているユーザーにはこの要素の内容は見えません。この機能は代替テキスト表示機能として検索エンジン対策(SEO対策)にもなります。

var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");

movie.swf

swfのファイル名をパスで指定。

mymovie

オブジェクトやembedタグのIDとなります。そこまで気にする必要ないかと思います。

400

Flashムービーの幅。

200

Flashムービーの高さ。

8

必要とするFlashPlayerのバージョン。

#336699

背景色を指定できます。

so.write("flashcontent");

(ユーザーの環境に条件を満たすバージョンがあった時に)ページにFlashコンテンツを表示させるスクリプトを出力するように命令します。これはHTML要素の中身を置換することで実行されます。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article