1. Home
  2. HTMLタグ
  3. 埋め込みタグ
  4. 様々な形式のデータを埋め込む

様々な形式のデータを埋め込む


<object></object>


object要素で、文書内に様々な形式のデータを埋め込むことができます。

この要素は、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>

メモ

この要素は、head要素内に配置することも可能です。ただし、表示を必要としない内容(BGM等)に限られます。


使用例

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


<p><object data="example.html" type="text/html" width="300" 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ではそれらが表示されません。


埋め込みタグ

ページの先頭へ