<object> の仕様
カテゴリー | 使用できる場所(親要素) | コンテンツモデル(子要素) | タグ省略 |
フローコンテンツ フレージングコンテンツ エンベディッドコンテンツ インタラクティブコンテンツ(usemap属性指定ありの場合) | エンベディッドコンテンツを子要素にもてる場所
| <param> トランスペアレント | 不可 |
<object> の属性
【構文】
<object data="url" type="MIMEタイプ" width="幅" height="高さ" ・・・>
</object>
属性 | 意味 | 値のサンプルなど |
data="url" | 組む込むファイルのurl【いずれか必須】 | サーバ内の相対パス : 「../index.html」 URL : 「http://www.cman.jp」 メール : 「info@example.jp」 |
type="MIMEタイプ" | 組み込むファイルのMIMEタイプ 【いずれか必須】 | 「image/gif」 |
typemustmatch | data属性で指定した外部コンテンツのMIMEタイプと、
type属性で指定したMIMEタイプが一致する場合のみ、
該当の外部コンテンツを利用可とする指定 ※HTML5で追加 | data属性、type属性両方が指定された時のみ指定可 |
width="値" | コンテンツを表示する領域の幅 (ピクセルで指定) | 「200」 |
height="値" | コンテンツを表示する領域の高さ (ピクセルで指定) | 「300」 |
usemap="マップ名" | イメージマップ名 | 「#マップ名」 |
name="名前" | 組み込む領域の名前 | |
form="フォームID" | 関連づけるformのID ※HTML5で追加 | |
廃止された属性 |
|
ページTOP
<object>タグのサンプル
画像を組み込む
(通常はimgタグを使用します。詳細な代替コンテンツが必要な場合にobjectタグを使用します。)
<object data="sample.jpg" type="image/jpeg" width="100"
height="140">
<p><a href="sample.jpg">表示出来ない場合は、クリックして表示してください。</a></p>
</object>
イメージマップを組み込む
<object data="html_area_sample1.gif" type="image/gif"
usemap="#sample" width="350" height="210">
</object>
<p>イメージマップに対応していない場合は、リンクが設定されません。<br>
(2014/09/10時点 Chrome, Safariでは対応していません。)</p>
<map name="sample">
<area href="http://www.cman.jp" shape="rect" alt="四角形" coords="20,30,160,70">
<area href="http://www.cman.jp" shape="circle" alt="円形" coords="210,105,40">
<area href="http://www.cman.jp" shape="poly" alt="多角形" coords="275,145,275,205,335,175">
</map>
イメージマップに対応していない場合は、リンクが設定されません。
(2014/09/10時点 Chrome, Safariでは対応していません。)
動画を組み込む
(動画未対応(表示されない)の場合メッセージを表示)
<object data="se04.swf" type="application/x-shockwave-flash"
width="300" height="200">
<p>動画に対応していないため、表示されません。</p>
</object>
サンプルのFlashファイルはFlashbucks様よりダウンロードし利用させていただいています。(2014/09/10時点 Firefox, Safariでは対応していません。)
音声を組み込む
(oggがサポートされていれば oggを、サポートされていなければ mp3を再生します。
いずれもサポートされていない場合、再生不可のメッセージを表示)
<object data="se_maoudamashii_onepoint04.ogg" type="audio/ogg" width="350" height="80">
<param name="filename" value="se_maoudamashii_onepoint04.ogg">
<param name="autostart" value="false">
<param name="showcontrols" value="true">
<object data="se_maoudamashii_onepoint03.mp3" type="audio/mpeg" width="350" height="80">
<param name="filename" value=se_maoudamashii_onepoint03.mp3">
<param name="autostart" value="false">
<p>ブラウザのバージョンによっては、再生できない場合があります。</p>
<p><a href="se_maoudamashii_onepoint03.mp3">再生できない場合は、クリックして再生します。</a></p>
</object>
</object>