<object></object>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類
要素

この要素は、img要素、iframe要素、applet要素、（他、独自拡張のbgsound要素、embed要素）などの代わりに使用できますが、ブラウザの対応がまだ完全ではないようです。


<object data="example.jpg" type="image/jpeg" width="200" height="100"> ～ </object>
属性 値 説明
data="" URI 埋め込むオブジェクトのURIを指定
type="" MIMEタイプ 埋め込むオブジェクトのMIMEタイプを指定
classid="" URI 実行プログラムのURIを指定
codetype="" MIMEタイプ 実行プログラムのMIMEタイプを指定
codebase="" URI data属性とclassid属性の基準URIを指定
width="" ピクセル数またはパーセント オブジェクトの幅を指定
height="" ピクセル数またはパーセント オブジェクトの高さを指定

代替の内容

指定したデータが利用できない場合は、この要素の内容が代替として使用されることになります。

<object data="example.jpg" type="image/jpeg" width="200" height="100">
ここに代替の内容を記述
</object>

以下は、object要素内に代替内容を指定した例です。

入れ子にして使用した例

次の例では、動画データ（MPEG）を再生できない場合は、静止画像（JPEG）が表示されるように指定しています。

<object data="example.mpeg" type="video/mpeg" width="200" height="100">
<object data="example.jpg" type="image/jpeg" width="200" height="100"></object>
</object>

対応している要素で埋め込む例

次の例では、object要素に対応していない場合は、embed要素で埋め込まれるように指定しています。

<object classid="clsid: ..." codebase="http:// ..." type="application/x-shockwave-flash" width="200" height="100">

<param name="movie" value="example.swf">
<param name="loop" value="false">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">

<embed src="example.swf" loop="false" quality="high" bgcolor="#ffffff" type="application/x-shockwave-flash" width="200" height="100" pluginspage="http:// ...">

</object>

パラメータの指定

パラメータを指定する場合は、object要素内の最初の部分（代替内容よりも前）にparam要素を配置します。

<object classid="clsid: ..." codebase="http:// ..." type="application/x-shockwave-flash" width="200" height="100">

<param name="movie" value="example.swf">
<param name="loop" value="false">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">

<embed src="example.swf" loop="false" quality="high" bgcolor="#ffffff" type="application/x-shockwave-flash" width="200" height="100" pluginspage="http:// ...">

</object>

使用例

HTMLファイルを埋め込んだ例

<p><object data="example.html" type="text/html" width="250" height="100">
<a href="example.html">埋め込まれる文書</a>
</object></p>
表示例

埋め込まれる文書

  • IEとFirefoxでは表示のされ方が異なります。（IEでは立体的な枠が付きますが、Firefoxでは付きません）
画像ファイルを埋め込んだ例

<p>
<object data="example.jpg" type="image/jpeg" width="200" height="150">
<img src="example.jpg" alt="タマ" width="200" height="150">
</object>

<object data="example.gif" type="image/gif" width="200" height="150">
<img src="example.gif" alt="ハナ" width="200" height="150">
</object>
</p>
表示例

タマ ハナ

  • IEとFirefoxでは表示のされ方が異なります。IE（7以下）では枠やスクロールバーが表示されますが、Firefoxではそれらが表示されません。