<object> - オブジェクトの貼り付け

■ 概要

項  目説  明
記述形式 <object>~</object>
対応ブラウザー H4+ / e3+ / N4+ / Fx1+ / Op6+ / Ch1+ / Sa1+
種  類
(カテゴリー)
フロー・コンテンツフレージング・コンテンツエンベッディッド・コンテンツ
インタラクティブ・コンテンツusemap属性をもつとき),
パルパブル・コンテンツ
置ける場所 エンベッディッド・コンテンツが記入できる場所
内包要素
(コンテンツ・モデル)
0個以上の param要素トランスペアレント
(コンテンツ・モデル: カテゴリー

■ 解説

<object> は,<applet><embed><bgsound><img> などに代わり,Java アプレットやマルチメディアリソースなどをページ上に貼り付けるための汎用的な要素です。 詳細なパラメータ制御には <param> を用います。

なお,<object>~</object> 間には,object要素に対応していないブラウザーや,指定されたコンテンツを扱えない場合のフォールバック・コンテンツ(代替のコンテンツ)を記入します。

<object> の動作は,ブラウザーやそのバージョン,インストールされているプラグインの種類などによって大きく異なるので注意してください。 現状ではまだブラウザー側の対応が完全ではないために,<object> や <applet><embed> などが混在した状況になっています。

■ 属性

種  類名  称
【固有属性】 data, type, typemustmatch *, name,
usemap, form, width, height
【グローバル属性】 accesskeyclasscontenteditable * dir
hidden *idlangspellcheck *style
tabindextitletranslate *
【ARIA role属性】
指定可能な値 (役割)
applicationdocumentimg,または,
presentation
【ARIA aria-* 属性】
指定可能なもの
ARIA グローバル状態とプロパティ
指定可能な役割の任意の状態とプロパティ   

HTML5 では,align, archive, border, classid, codebase, codetype, declare, hspace, standby, vspace などの属性が廃止されました。 とくに,classid に関しては,代わりに type属性の値に登録済みのMIMEタイプ を設定することで置き換える必要があります(以下の例では未修正)。 HTML5 で利用可能な属性は,以下の通りです。

data属性
組み込むオブジェクトのファイルを指定します。(URL,または,単なるファイル名)

type属性
組み込むコンテンツの MIMEタイプを指定します。

typemustmatch属性
type属性の値と "Content-Type"メタデータ の値を一致させる必要があるかどうかを指定します。

name属性
object要素を使って別の HTML文書を組み込むと,iframe要素のように新たに文書を表示させる領域が作成されます。  name属性はこの領域に名前をつけます。

usemap属性
クライアントサイド・クリッカブルマップを使用する場合に <map>id属性の値を指定します。

form属性
<form> と関連付ける場合に <form>id属性の値を指定します。

width属性
横幅をピクセルパーセンテージで指定します。

height属性
高さをピクセルパーセンテージで指定します。

■ CSSプロパティ

種  類名  称
【よく使うもの】

■ 使用例

■ 画像を張りつける

下記のようにして画像オブジェクトを張りつけることができます。

<object data="xxx.gif" type="image/gif" width="100" height="100"></object>

■ サポートしているものを張りつける

次の例では,PNG 画像がサポートされていれば PNG 画像を,サポートされていなければ GIF 画像を貼り付けます。

<object data="xx.png" type="image/png" height="100" width="100">
 <object data="xx.gif" type="image/gif" height="100" width="100">
 </object>
</object>

■ RealMedia のコントロールを張りつける

RealNetworks 社の RealMedia を再生するコントロールを張りつけます。 <object> 未サポートのブラウザーのために,内部で <embed> による呼び出しも記述しています。 → RealMedia 入門

<object classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
 width="260" height="30">
 <param name="SRC" value="dummy.rm">
 <param name="AUTOSTART" value="false">
 <param name="CONTROLS" value="ControlPanel">
 <param name="CONSOLE" value="cons">
 <param name="NOLOGO" value="true">
 <embed type="audio/x-pn-realaudio-plugin" src="xxx.rm"
  autostart="false" width="260" height="30" controls="ControlPanel"
  console="cons" name="player" nologo="true">
 </embed>
</object>

■ ブラウザー内蔵の機能を呼び出す

次の例では,IE4.0 に標準でサポートされている ActiveX コントロールのひとつを使用して,動く画像を実現します。(IE4.0~)

<img id="img1" src="xxx.gif" style="position:absolute">
<object classid="clsid:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">
 <param name="AutoStart" value="-1">
 <param name="Direction" value="1">
 <param name="Repeat" value="-1">
 <param name="Bounce" value="0">
 <param name="Duration" value="5">
 <param name="Shape" value="Rect(0,0,100,100)">
 <param name="Target" value="img1">
 <param name="TimerInterval" value="0.02">
</object>

■ 備考