HTML 4.0のマルチメディア機能は、画像、アプレット（読み手のWWWブラウザに読み込まれて実行されるプログラム）、動画、当該ページ以外のHTML文書、などを現在の文書に埋め込むことを可能にします。
例えば、PNG画像を文書に埋め込むには、次のように記します。
<BODY> <P>グランドキャニオンのクローズアップ写真です: <OBJECT data="canyon.png" type="image/png"> グランドキャニオンの <EM>クローズアップ</EM> です。 </OBJECT> </BODY>
以前の版のHTMLでは（IMG要素として）画像を、また（APPLET要素として）アプレットを扱えました。けれども、この両要素には幾つか限界があります。
これらの問題を打開するため、HTML 4.0ではOBJECT要素を用意しました。あらゆる目的に適う、オブジェクト一般の扱い方を規定するためのものです。OBJECT要素を使うと、ユーザエージェントでオブジェクトを表示させるために必要な全てのこと、すなわちソースコード、パラメータの初期値、動作時のデータ、を記すことができます。この仕様書では、「オブジェクト」という語を、HTML文書中に埋め込みたいと考えられるような全てのモノを指し示すための語として記します。そのようなモノを指し示す語としては、アプレット、プラグイン、メディアハンドラ、等が一般に通用しています。
したがって、新登場のOBJECT要素は、既存の要素の機能を足し合わせて引き継いだものとなっています。各々の機能を下にまとめました。
| 埋め込みたいモノ | 専用の要素 | 汎用の要素 |
|---|---|---|
| 画像 | IMG | OBJECT |
| アプレット | 非推奨) | OBJECT |
| 自身以外のHTML文書 | IFRAME | OBJECT |
上の表は、埋め込みたいモノが、専用の要素としても汎用の要素としても文書中に埋め込めるということを示しています。汎用のOBJECT要素は更に、将来登場するであろうMIME$B%?%$%W$GI=$5$l$k%b%N$K$bBP1~$7$F$$$^$9!#
画像の埋め込みには、OBJECT 要素とIMG要素のどちらを使っても構いません。
アプレットを埋め込む場合は、非推奨のAPPLET要素ではなく、OBJECT要素を使って下さい。
自身以外のHTML文書を埋め込む場合は、新登場のIFRAME$BMWAG$HOBJECT要素のどちらを使っても構いません。どちらの場合でも、埋め込まれた文書は本体の文書から独立した存在のままです。視覚系のユーザエージェントは埋め込み文書を独立した表示窓に表示するでしょう。両要素の機能的な比較対照について、詳しくは本章5節、外部文書の埋め込みに関する注意をご覧下さい。
画像その他の埋め込みオブジェクトは、通常のリンク機構やイメージマップ方式のどちらによっても、それと結びついたハイパーリンク機構を実現させ得ます。イメージマップは、埋め込みオブジェクトを、リンク元機能を持った複数の区画に分割するモノです。ある区画がアクティブにされると、次の文書が読み込まれたり、プログラムが起動されたり、等のリンク結果が発生します。
以下では、色々なモノの埋め込み方法や、埋め込んだモノにイメージマップを設定する方法について、様々な手法を解説します。
<!--テキスト表示のみのユーザエージェントでも画像内容が判るようにし、また非グラフィック環境でも操作可能にするため、必ず「ALT」属性の値を記して下さい。また、サーバーサイドのイメージマップ機能は使わないようにして下さい。-->
<!-- To avoid problems with text-only UAs as well as
to make image content understandable and navigable
to users of non-visual UAs, you need to provide
a description with ALT, and avoid server-side image maps -->
<!ELEMENT IMG - O EMPTY -- Embedded image -->
<!ATTLIST IMG
%attrs; -- %coreattrs, %i18n, %events --
%URI; #REQUIRED -- URI of image to embed --
%Text; #REQUIRED -- short description --
%URI; #IMPLIED -- link to long description
(complements alt) --
%Length; #IMPLIED -- override height --
%Length; #IMPLIED -- override width --
%URI; #IMPLIED -- use client-side image map --
ismap (ismap) #IMPLIED -- use server-side image map --
>
開始タグ: 必要、終了タグ: なし。
属性の定義
他に使用可能な属性
文書中の、画像を埋め込みたい場所にIMG要素を配置することで、画像を埋め込むことができます。 IMG要素には内容はありません。この要素は通常は行の中でsrc属性で指定された画像によって置き換えられます。例外はalign属性でrightまたはleftに位置指定された時です。この場合、画像は「フロート」し、行の外に出ます。
前に出てきた [第12章の] 例文で、家族写真へのリンクを設けたものがありました。今回は、その写真を直接文書中に埋め込んでみましょう。
<BODY>
<P>休暇から戻ったところです! 湖畔で撮った家族写真です:
<IMG src="/www.somecompany.com/People/Ian/vacation/family.png"
alt="家族写真:湖畔にて">
</BODY>
これはOBJECT要素を使って次のように書くこともできます。
<BODY>
<P>休暇から戻ったところです! 湖畔で撮った家族写真です:
<OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png"
type="image/png">
家族写真:湖畔にて
</OBJECT>
</BODY>
alt属性は画像表示がされない場合に当該画像の代役を果たす文章を記すためのものです（代替テキストの記し方については本章8節で説明します）。画像を含む文書を読み込んだユーザエージェントは、そもそも画像を表示できなかったり、当該画像ファイル形式に対応していなかったり、画像を読み込まないよう設定されていたりした場合には、この代替テキストを表示する必要があります。
次にlongdesc属性を使った補足説明文書へのリンクの記し方を示します。
<BODY>
<P>
<IMG src="sitemap.gif"
alt="HP Labs Site Map"
longdesc="sitemap.html">
</BODY>
alt属性は当該画像の代役を果たす短い文を表示します。その代替テキスト内容を見て、読み手は、更にlongdesc属性が指し示す補完文書（この場合は「sitemap.html」）まで読み進むべきかどうかを判断できることとなります。
視覚系のメディアにおける、画像の大きさ、全体の配置、枠線などの表し方については、本章7節「画像、オブジェクト、アプレットの視覚的表現」をご覧下さい。
<!ELEMENT %flow;)*
-- generic embedded object -->
<!ATTLIST OBJECT
%attrs; -- %coreattrs, %i18n, %events --
declare (declare) #IMPLIED -- declare but don't instantiate flag --
%URI; #IMPLIED -- identifies an implementation --
%URI; #IMPLIED -- base URI for classid, data, archive--
%URI; #IMPLIED -- reference to object's data --
%ContentType; #IMPLIED -- content type for data --
%ContentType; #IMPLIED -- content type for code --
%URI; #IMPLIED -- space separated archive list --
%Text; #IMPLIED -- message to show while loading --
%Length; #IMPLIED -- override height --
%Length; #IMPLIED -- override width --
%URI; #IMPLIED -- use client-side image map --
name CDATA #IMPLIED -- submit as part of form --
tabindex NUMBER #IMPLIED -- position in tabbing order --
>
開始タグ: 必要、終了タグ: 必要
属性の定義
他に使用可能な属性
ほとんどのユーザエージェントには、テキスト、GIF画像、色指定、フォント指定、その他いくつかのグラフィック要素、などのWWW上で一般化している形式のデータを扱う機能が組み込まれています。表示を要求されたモノのデータ形式をサポートしていない場合は、外部アプリケーションを連動させて取り扱うこととなっているでしょう。OBJECT要素を使うと、当該データをユーザエージェントから独立して扱うか、または何らかのプログラムを指定してユーザエージェントの内部に表現させるかを設定することができます。
非常に一般的に言うと、この場合HTML文書の書き手は次の3つの情報を記しておく必要があるでしょう。
OBJECT要素の場合、書き手は上記3点を全て設定できますけれど、3つ全てを記す必要はない場合があります。例えば、表示用データを外部から与える必要がないオブジェクト（ちょっとしたアニメーションを表示するアプレットなど表示データが既にアプレット自体に組み込まれているもの）などを扱う場合です。動作時の値に関する特段の指定を必要としないモノもあるでしょうし、ユーザエージェント自身が表示能力を持っているために表示環境の指定を必要としないモノもあるでしょう（例えばGIF画像など）。
表示環境や表示データの所在についてはOBJECT要素によって記しますが、表示環境の動作に必要な値を記すにはPARAM要素を利用します。これについてはオブジェクトの初期化に関する項で説明します。
OBJECT要素はHEAD要素内にも記せます。HEAD要素の内容は基本的にユーザエージェントの画面に表示されませんから、内容の表示が必要になるようなOBJECT要素をHEAD要素内に記してはなりません。HEAD要素内にOBJECT要素を記す場合の注意点については、フレーム文書のデータ共有に関する項もご覧下さい。
またフォーム内でOBJECT要素を使う場合の注意点については、第17章、フォームのコントロールについて記した節もご覧下さい。
ユーザエージェントは、次の優先順位に従ってOBJECT要素を取り扱う必要があります。
HEAD要素内にOBJECT要素を記す場合は、内容を 含めないようにすべきです。
次の例では、OBJECT要素によってアナログ時計アプレットがHTML文書中に埋め込まれています。このアプレットは、Python言語によって書かれており、動作時の値を別途必要としません。classid属性が、このアプレットの所在を示しています。
<P><OBJECT classid="http://www.miamachina.it/analogclock.py"> </OBJECT>
ユーザエージェントが当該OBJECTの宣言を読み込んで解釈を終えた時点で即座にアプレットが表示され始めるということにご注意下さい。最初の「OBJECT」宣言の記し方によって、表示開始時点を遅らせることも可能です。（その方法はまた後で。）
OBJECT要素には、次のように、内容として代替テキストを記して下さい。ユーザエージェントが時計アプレットを表示できない場合に備えるためです。
<P><OBJECT classid="http://www.miamachina.it/analogclock.py"> アニメーション時計 </OBJECT>
HTML 4.0のOBJECT要素には、 重要な機能として、代替オブジェクト表示機能が施されています。入れ子にした各OBJECT宣言で、異なるMIMEタイプのモノを扱うことも可能です。最も外側のOBJECT要素が示すオブジェクトを表示できなかったユーザエージェントは、その内容を表示しようとしますが、それが [代替テキストではなく] 別のOBJECT要素であっても構わないというわけです。
次の例文では、この代替表示機構を説明するため、複数のOBJECT宣言を入れ子にしてあります。このOBJECT要素を扱うユーザエージェントは、次の順序で自分が表示できるものかどうかを判定していきます。 (1) Pyton言語で書かれている地球アプレット、(2) 地球のMPEG動画、(3) 地球のGIF画像、(4) 代替テキスト。
<P> <!-- できればPython appletを動かして欲しい -->
<OBJECT title="宇宙から見た地球の姿"
classid="http://www.observer.mars/TheEarth.py">
<!-- だめならMPEG videoを見て欲しい -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- それもだめならGIF画像を -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- 全くダメなら次の文章を読んでください -->
宇宙から見た<STRONG>地球</STRONG>の姿。
</OBJECT>
</OBJECT>
</OBJECT>
最も外側の「OBJECT」宣言は、表示データや初期値の設定が不要なアプレットを表しています。2番目の「OBJECT」宣言はMPEG動画を表していて、MPEG動画再生環境の所在が設定されていないため、ユーザエージェントが単独で再生できるかどうかによって表示される/されないが決まります。2番目の「OBJECT」宣言にはtype属性の設定があるため、ユーザエージェントは当該オブジェクトがMPEG動画データであることが理解でき、「TheEarth.mpeg」ファイルをダウンロードすべきかそうでないかを判断可能です。3番目の「OBJECT」宣言はGIF画像の所在を示しており、また以上の何れも表示されなかった場合に利用される代替テキストを内容として含んでいます。
行内データと外部データの比較について。 表示させたいデータは、行内データ、あるいは外部データの2通りのやり方で供給できます。行内データの方が概して表示は素早いですが、大量のデータを扱うには不便です。
次の例文は、行内データがOBJECT要素に与えられている状態を示したものです。
<P>
<OBJECT id="clock1"
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...base64形式のデータ...">
時計
</OBJECT>
オブジェクトの大きさ、配置、枠線の有無などについては、本章7節「画像、オブジェクト、アプレットの視覚的表現」をご覧下さい。
<!ELEMENT PARAM - O EMPTY -- named property value -->
<!ATTLIST PARAM
ID #IMPLIED -- document-wide unique id --
CDATA #REQUIRED -- property name --
CDATA #IMPLIED -- property value --
valuetype (DATA|REF|OBJECT) DATA -- How to interpret value --
%ContentType; #IMPLIED -- content type for value
when valuetype=ref --
>
開始タグ: 必要、終了タグ: なし。
属性の定義
PARAM要素は、当該オブジェクトの動作時に与える必要があるようなパラメータ値を設定するものです。OBJECT要素あるいはAPPLET要素の内容として、幾つでも、またどんな順序でもPARAM要素を記せます。順序や個数は問われませんが、OBJECT要素あるいはAPPLET要素の開始タグの直後に記す必要があります。
「names」属性と「values」属性で設定した値は、オブジェクトの表示環境によって解釈されると想定されます。この仕様書では、各ユーザエージェントが実際にどのように「name名/value値」の組を判定するか、あるいはパラメータ名が2回現れた際にどのように解釈すべきかといったことについては定めません。
さて、PARAM要素の使い方を説明するために、再度時計の例文を使います。ここでは、時計アプレットは動作時のパラメータとして初期表示サイズの高さと幅の2つの値を扱えるものとします。この場合2つのPARAM要素によって例えば高さ40ピクセル、幅40ピクセルというパラメータ値を設定できます。
<P><OBJECT classid="http://www.miamachina.it/analogclock.py"> <PARAM name="height" value="40" valuetype="data"> <PARAM name="width" value="40" valuetype="data"> あなたのユーザエージェントは Python アプリケーション に対応していません。 </OBJECT>
次の例では、オブジェクトに与える動作時データとして「Init_values」と名づけられたパラメータが外部リソース（GIFファイル）となっています。そこでvaluetype属性の値は「ref」に設定され、「value」属性値でそのURIが記されています。
<P><OBJECT classid="http://www.gifstuff.com/gifappli"
standby="エルヴィスを読み込み中です...">
<PARAM name="Init_values"
value="elvis.gif">
valuetype="ref">
</OBJECT>
同時にstandby属性を設定し、オブジェクト表示環境をダウンロードしている間に代替表示させるメッセージを記してあることにも注目して下さい。
OBJECT要素を表示する場合、ユーザエージェントは、必ず当該要素の直接の子要素であるPARAM要素の有無を確認し、その値をOBJECT要素に送る必要があります。
そこで、次の例文では、オブジェクト「obj1」を表示する場合、「param1」の値が「obj1」に送られます（そして「obj2」には送られません）。もし「obj1」の表示が不可能で「obj2」の表示を開始する場合には、「param1」は無視され「param2」が「obj2」に送られます。どちらのOBJECT要素も表示できない場合は、PARAM要素のパラメータ値も使われません。
<P>
<OBJECT id="obj1">
<PARAM name="param1">
<OBJECT id="obj2">
<PARAM name="param2">
</OBJECT>
</OBJECT>
オブジェクトの表示環境の所在は、URIによって記されます。第2章1節の、URIを概説した項で説明したように、絶対URIの最初の部分は、そのURIが示すデータへのアクセス手段を意味します。HTML文書の場合、これは大概「http」です。けれどもアプレットの中には別のスキームでのアクセスを要求するものがあります。例えば、Javaアプレットの場合、URIの冒頭は「java」、ActiveXアプレットの場合は「clsid」と記す必要があります。
この例では、HTML文書にJavaアプレットを組み込んでいます。
<P><OBJECT classid="java:program.start"> </OBJECT>
codetype属性を設定しておくと、読み手のユーザエージェントは、Javaで書かれたプログラムを自分が実行できるかどうかによって、当該Javaアプリケーションをダウンロードするかどうかを判断できます。
<OBJECT codetype="application/java-archive"
classid="java:program.start">
</OBJECT>
オブジェクトによっては、どの表示環境で表示を行うべきかの指定と、その表示環境をどこで得られるかの追加指定を必要とするものもあります。この場合はcodebase属性によって所在に関する追加情報を設定できます。
<OBJECT codetype="application/java-archive"
classid="java:program.start">
codebase="http://foooo.bar.com/java/myimplementation/"
</OBJECT>
次の例は、スキーム名「clsid」から始まるActiveXオブジェクトのURIを、（「OBJECT」要素のclassid属性によって）記したものです。data属性が、表示用データ（時計）の所在を示しています。
<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="http://www.acme.com/ole/clock.stm">
このアプリケーションはサポートされていません。
</OBJECT>
ここまでの例では、単独で働くオブジェクトを定義する方法についてのみ記しました。もし同一文書内に1つのオブジェクトが複数の実体として含まれるような文書を作りたい場合、オブジェクトの宣言と、その実体化とを分離できます。宣言と実体化との分離には、次のような利点があります。
あるオブジェクトの宣言で、ユーザエージェントの読み込み時点で即実体化が開始されることを避けるためには、論理型属性declareを当該OBJECT要素に設定しておきます。この場合、同時に
このようなOBJECT要素の宣言は、HTML文書中で、当該OBJECT要素を最初に実体化する部分よりも前に記す必要があります。 declare属性が設定されたオブジェクトは、（例えばそのオブジェクトへのリンクがアクティブになった時や、そのオブジェクトを参照するオブジェクトがアクティブになった時など）表示を要求される毎に実体化します。
次の例は、リンク目標になっているOBJECT要素を宣言したものです。このオブジェクトは、例えばリンク元になっている文がクリックされることで、実体化します。
次の例文では、動作時の値として他のオブジェクトを使用する方法を示します。この例では、詩文を見るための臨時的表示環境に表示させたいテキスト（このケースでは詩文）を入力します。詩文表示環境は、動作時のパラメータとして「font」パラメータを参照します（詩文の表示に、とあるフォントを使用するわけです）。この動作時のパラメータ値（フォント）はそれ自体が独立したオブジェクトで、フォントオブジェクトを挿入する（けれども表示はしない）代物です。フォントオブジェクトと詩文表示環境の連携は、(1) フォントオブジェクトが宣言された際にid名「tribune」を与えられており、(2) 詩文表示オブジェクトのPARAM要素（のvaluetype属性とvalue属性）がそれを参照する 、という形で行われます。 declare属性をサポートしていないユーザエージェントは、OBJECT宣言の内容を表示する必要があります。 APPLET要素は（その全ての属性と共に）非推奨です。代わりにOBJECT要素で記して下さい。 正式な定義についてはTransitional DTDをご覧下さい。
属性の定義 アプレットが「復元」される時、「start()」メソッドは呼び出されますが、「init()」メソッドは呼び出されません。[現時点で当該要素に設定されている] 各属性は、元のオブジェクトが直列化される際に何の属性値も保持していない場合に限り、検証されます。当該APPLET実体に [直列化以前に] 設定されていた属性は、[復元後も] アプレットが利用できます。書き手は、この機能の利用に関して慎重過ぎるほどの注意が必要です。直列化を行う際にはアプレットの実行を終了させておいてください。
「APPLET」要素には、前述の「code名か、この「object」名のどちらか一方が必要です。もし両方が記されている場合は、両者が違うクラス名を扱おうとしてしまう場合に限り、エラーとなります。
他に使用可能な属性 Java対応ユーザエージェント全てがサポートしているこの要素は、HTML文書中にJavaアプレットの埋め込みを可能にします。けれどもOBJECT要素の採用により、「APPLET」要素は非推奨となりました。 APPLET要素の内容は、APPLET要素に対応していないユーザエージェント、あるいはアプレットを動作させないように設定されたユーザエージェントで、代替的な情報として利用されます。それ以外の場合、ユーザエージェントは内容を無視する必要があります。 非推奨例（DEPRECATED EXAMPLE）: 上の例文はOBJECT要素で次のように書き換えることができます。 必要な初期値についてはPARAM要素によって与えます。 非推奨例（DEPRECATED EXAMPLE）: OBJECT要素によって次のように書き換えることができます。 時に、他の文書にIFRAME要素やIFRAME要素の方は、リンク先目標フレーム（第16章3節「リンクの目標となるフレーム枠に名前をつける」を参照のこと）となることもでき、また「印刷」や「ソースを見る」などの対象として読み手が当該フレームを「選択」することもできます。ユーザエージェントは、選択されたフレーム要素と選択されないものとを区別して表示します（例えば、選択されたフレームには縁取りをつけて表示するとか）。 埋め込まれた文書は、それを含む元文書とは完全に独立した存在として扱われます。例えば、埋め込まれた文書の内部に記されている相対URIは、その文書に設定されている基準URIに拠って解釈されるのであって、元文書の基準URIからの影響は受けません。埋め込まれた文書は、単に他の文書が表示されている画面の一部分（例えば子ウインドウの中）に表示されるというだけで、独立した別個の存在なのです。
例えば、次の例文は元文書 embed_me.html 中のOBJECT要素が、その embed_me.html 自身を埋め込もうとしているものです。 OBJECT要素の内容は、オブジェクトのdata属性の指定物が表示できない場合に限って代替的に表示されるということを思い起こしてください。 当該文書それ自身を内部に埋め込もうとするようなHTML文書をユーザエージェントがどう扱うべきかについては、[この仕様書は] 何も定義しません。 イメージマップ機能を利用すると、書き手は、画像やオブジェクトを幾つかの区画に分割し、各区画毎に特定動作の引き金を設定できます（例えば、次の文書へリンクしたり、プログラムを起動させたり）。読み手がある区画をアクティブにすると、その区画に設定された動作が始まります。 イメージマップは、オブジェクトをまず用意し、そのオブジェクト上に反応可能領域の設定を行うことで、作成します。 イメージマップには次の2種類のものがあります。
クライアント側イメージマップの方が、サーバ側のものより、少なくとも次の2点で優れています。まず、非グラフィック系環境での読み手にも利用できること。そして、選択地点が有効な区画かどうかについて即座に反応が生じること。 開始タグ: 必要、終了タグ: 必要。 開始タグ: 必要、終了タグ: なし。
AREA要素の属性 座標位置は、オブジェクトの左上端から数えます。全ての値は大きさ<length>で指定します。各々の値はコンマ区切りで列記します。
ある要素をイメージマップに関連づける属性
他に使用可能な属性 MAP要素は、他の1つ以上の要素と連携してクライアント側イメージマップを構成するものです（連係相手になれるのは、IMG要素、INPUT要素）。イメージマップは、相手要素のusemap属性によって、連携相手と結びつけられます。 OBJECT要素にusemap属性が設定されている場合、その「OBJECT」要素には画像が含まれていると推察されます。さらにまた、OBJECT要素がクライアント側イメージマップと連携させられていた場合には、ユーザエージェントは、そのOBJECT要素のみを手がかりに、読み手の入力に対するイメージマップとしての反応を行うこととなります。これはすなわち、（例えば音声出力環境やサーチロボットなどでは）OBJECT要素を処理することなく（すなわちデータ形式の検定やオブジェクト本体のダウンロードを行わずに）イメージマップ機能を実現できるというこということを意味します。OBJECT要素を利用したイメージマップ機能を含むHTML文書を作る場合には、オブジェクト本体が全てのユーザエージェントで扱われるとは限らないということを覚えておいて下さい。 どのMAP要素にも、以下の要素を内容として記せます。 もし2つ以上の区画が重なり合っていた場合、先にその部分を含む区画を設定している要素の方が優先権を持ちます。（例えば読み手の入力に反応する等。） 画像データが不在だったり利用できなかったりする場合のために、ユーザエージェントも、当該文書の書き手も、文章で代用する仕掛けを用意しておく必要があります。例えば、画像によるイメージマップを代用するalt属性の代替テキストを用いたイメージマップ機能の実行など。この場合のリンクは様々な手法でアクティブにできます（キーボード入力、音声入力、など）。
注。
MAP要素は、HTML 2.0準拠のユーザエージェントへの後方互換性がありません。
この例は、OBJECT要素を使ったイメージマップを表しています。OBJECT要素の画像が表示される限りは要素の内容を前面に出したくないので、MAP要素をOBJECT要素の内容として「隠す」形で記述してあります。言い換えると、MAP要素の内容は、OBJECT本体が表示できない場合にのみ表示されることになります。 読み手のユーザエージェントがOBJECT要素の画像を表示できる場合でもイメージマップの内容を表示したいという場合もあります。例えば、OBJECT要素 と イメージマップを連動させつつ、当該ページの下端にテキスト表示によるナビゲーションバーを配置したい、といった場合。この場合には、次のようにMAP要素をOBJECT要素の外側に記します。
上と同等のイメージマップを、今度はAREA要素によって表します。alt属性による代替テキストの記し方に注目して下さい。 今度は、OBJECT要素の代わりにIMG要素を使って記したイメージマップ（同じMAP要素を利用するもの）です。 続けて、イメージマップ設定を複数のオブジェクトで共有する方法について説明します。 さて、入れ子にしたOBJECT要素は、表示させたいオブジェクトのデータ形式をサポートしていないユーザエージェントで読まれることを仮定した、段階的な代替手段を提供したいような場合に便利です。例えば次のように。 これを読み込んだユーザエージェントがPNG形式に対応していない場合、GIF画像の表示を試みることとなります。更に、GIF形式もサポートしていない（例えば音声出力などの）ユーザエージェントの場合は、内側のOBJECT要素の内容として記された文章を表示することになります。このように入れ子にしたOBJECT要素を含むHTML文書を作る場合、次のようにしてイメージマップ設定を共有することができます。 次の例は、「A」要素を用いてイメージマップ中の反応不能区域を設定する方法を説明したものです。最初のアンカーは、反応不能の小さい円形区画を設定しています。2番目のアンカーは、反応可能となっている、最初の円と中心が等しく、より大きい円形区画を設定しています。この両者によって、中心部が反応不能で周辺部が反応可能となっているドーナツ状のリンク区域が作られています。大きい円を小さい円が上書きしなければ意味がないので、このアンカーの配置順が要点となります。 同様に、AREA要素のnohref属性は、当該区画には関連づけられるリンクが存在しないということを記すものです。 サーバ側イメージマップは、クライアント側イメージマップとして扱うには複雑すぎるようなものを扱う際に魅力的な表現手段と考えられるでしょう。 サーバ側イメージマップは、IMG要素かINPUT要素でのみ扱えます。IMG要素の場合は、IMG要素をA要素の内容として記し、論理型属性であるismap ([CI]）を設定しておく必要があります。INPUT要素の場合は、「image」形式で記す必要があります。 画像がクリックされてイメージマップ中のリンク部分がアクティブになると、表示中のスクリーンの座標値がサーバに直接送信されます。この座標値はピクセル値で当該画像上の [クリックされた] 位置を表しています。ピクセルという語の定義とその数え方については、[CSS1]をご覧下さい。
次の例では、反応可能領域が、サーバ側のリンクとして設定されています。そこで、画像のどの部分がクリックされたかは、全てその座標値がサーバに送信されます。 クリック位置の情報は、次のようにしてサーバに渡されます。まずユーザエージェントは、A要素のhref属性に記されているURIを元に、「?」「x座標値」「,」「y座標値」の順に付加情報を記した新しいURIを書き出します。それから、この新しいURIに基づいてリンクを辿ろうとします。つまり、上の例で言うと、読み手が「x=10,y=27」の点をクリックしたとすれば、生成されるURIは「http://www.acme.com/cgi-bin/competition?10,27」というものになるというわけです。 読み手が座標値の選択手段を持てないようなユーザエージェント（例えばキーボード入力しか受けつけられない非GUI系のユーザエージェントや、音声出力環境など）は、リンクがアクティブにされた場合には座標値「0,0」という情報を送信して下さい。 IMG要素とOBJECT要素の、配置など視覚的表現に関する全ての属性は非推奨であり、スタイルシートによって代用できます。
属性の定義 width属性やheight属性は、もし設定されていた場合、ユーザエージェントに対し画像やオブジェクトの実際の大きさではなく、この属性の値に従った大きさにして表示するよう指示します。 オブジェクトが画像だった場合、拡大縮小されます。ユーザエージェントは、指定された値に合致するよう画像を拡大縮小させねばなりません。もし値の指定がパーセンテージだった場合、これは現在の表示画面に対する割合であって、画像、オブジェクト、アプレット等のそれ自体の大きさに対する拡大縮小率ではないということに注意して下さい。 height属性とwidth属性が設定されていると、ユーザエージェントに対し、表示すべきオブジェクトの大きさを [オブジェクトのデータが受け取られる前に] 予め知らせることができるので、画像データの到着を待つことなく文書全体の表示を継続させられます。 vspace属性とhspace属性は、IMG要素、APPLET要素、OBJECT要素などの周囲に取りたい、左右の余白（hspace）と上下の余白（vspace）を設定するものです。既定値は定義しませんが、概して、とても小さいけれどもゼロではない大きさです。どちらの属性も値の形式は大きさです。 画像あるいはオブジェクトが枠線で囲まれる場合もあります。（例えば、枠線を表示するよう設定されていたり、画像がA要素の内容であった場合など。） align属性を使うと、IMG要素、
OBJECT要素、APPLET要素と周囲の文章との間に施したい配置関係を設定できます。 以下のalign属性値によって、オブジェクトと文章との配置関係を記します。 そして属性値leftとrightは、画像を周囲の文章から切り離し、左または右にフロートさせます。これは第15章1節3項「フロート状態のオブジェクト」で説明します。
「align」の解釈が違うことについて。
各ユーザエージェントがalign属性をどう解釈・表現しているかを見ると、様々な違いがあります。当該オブジェクトの直前の文章との関係しか考慮しないユーザエージェントもあれば、当該オブジェクトの直前直後のどちらの文章との関係をも考慮するユーザエージェントもあります。
属性の定義 文字表示を行うのではない要素（IMG、AREA、INPUT）を文書中で用いる場合は、それらが表示されない場合に代用とされる「代替テキスト」を用意する必要があります。代替テキストを用意しておくと、グラフィック系表示装置のない端末型ユーザエージェントの利用者、フォーム非対応ユーザエージェントの利用者、視覚障害を持つ人、音声出力環境の利用者、画像の自動表示設定を解除している人、等に対する文書内容の伝達が可能になります。 代替テキストは便利であるとはいえ、その扱いには注意が必要です。「alt」属性が必要なHTML文書を作る場合には次のガイドラインに従って下さい。 ユーザエージェントを作る場合には、附記B.9に記した、代替テキストが設定されていない場合にどうやって代替テキストを補完する文章を生成するかに関する注意を読んでおいて下さい。
注。
アクセシビリティが高いHTML文書を作成するための情報については、[WAIGUIDE]をご覧下さい。
<P><OBJECT declare
id="earth.declaration"
data="TheEarth.mpeg"
type="application/mpeg">
宇宙から見た<STRONG>地球</STRONG>の姿。
</OBJECT>
...中略...
<P>いかす<A href="#earth.declaration">地球のアニメーション !</A>
<P><OBJECT declare
id="tribune"
type="application/x-webfont"
data="tribune.gif">
</OBJECT>
...ここで [S. T. Coleridge の] KublaKhan.txt からの詩文を表示...
<P><OBJECT classid="http://foo.bar.com/poem_viewer"
data="KublaKhan.txt">
<PARAM name="font" valuetype="object" value="#tribune">
<P>このかっこいい詩文表現が見られないんですね ...
</OBJECT>
Including an applet）: APPLET要素
この例では、APPLET要素によってJavaアプレットがHTML文書中に埋め込まれます。codebase属性の設定がありませんから、当該文書が存在するディレクトリと同じディレクトリにアプレットが存在すると考えられます。
<APPLET code="Bubbles.class" width="500" height="500">
泡が動き回るJava appletアニメーション。
</APPLET>
<P><OBJECT codetype="application/java"
classid="java:Bubbles.class"
width="500" height="500">
泡が動き回るJava appletアニメーション。
</OBJECT>
Javaアプレットを「APPLET」要素として記すこの方法は
<APPLET code="AudioItem" width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
歓迎の音楽を奏でるJava applet。
</APPLET>
<OBJECT codetype="application/java"
classid="AudioItem"
width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
歓迎の音楽を奏でるJava applet。
</OBJECT>
Notes on embedded documents）
...中略...
<OBJECT data="embed_me.html">
警告: embed_me.html を埋め込むことはできません。
</OBJECT>
...後略...
13.6
イメージマップ（Image maps）
Client-side image maps）: MAP要素とAREA要素
<!ELEMENT %block;)+ | AREA+) -- client-side image map -->
<!ATTLIST MAP
%attrs; -- %coreattrs, %i18n, %events --
CDATA #REQUIRED -- for reference by usemap --
>
<!ELEMENT AREA - O EMPTY -- client-side image map area -->
<!ATTLIST AREA
%attrs; -- %coreattrs, %i18n, %events --
%Shape; rect -- controls interpretation of coords --
%Coords; #IMPLIED -- comma separated list of lengths --
%URI; #IMPLIED -- URI for linked resource --
nohref (nohref) #IMPLIED -- this region has no action --
%Text; #REQUIRED -- short description --
tabindex NUMBER #IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script; #IMPLIED -- the element got the focus --
onblur %Script; #IMPLIED -- the element lost the focus --
>
Client-side image map examples）
<HTML>
<HEAD>
<TITLE>The cool site!</TITLE>
</HEAD>
<BODY>
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>このサイトの構成:
<A href="guide.html" shape="rect" coords="0,0,118,28">利用案内</A> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">直行</A> |
<A href="search.html" shape="circle" coords="184,200,60">検索</A> |
<A href="top10.html" shape="poly" coords="276,0,373,28,50,50,100,120">トップ10</A>
</MAP>
</OBJECT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>クールなサイト!</TITLE>
</HEAD>
<BODY>
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
</OBJECT>
...その他このページに書かれる内容...
<MAP name="map1">
<P>このサイトの構成:
<A href="guide.html" shape="rect" coords="0,0,118,28">利用案内</A> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">直行</A> |
<A href="search.html" shape="circle" coords="184,200,60">検索</A> |
<A href="top10.html" shape="poly" coords="276,0,373,28,50,50,100,120">トップ10</A>
</MAP>
</BODY>
</HTML>
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<P>ナビゲーションバー
</OBJECT>
<MAP name="map1">
<AREA href="guide.html"
alt="利用案内"
shape="rect"
coords="0,0,118,28">
<AREA href="search.html"
alt="検索"
shape="rect"
coords="184,0,276,28">
<AREA href="shortcut.html"
alt="直行"
shape="circle"
coords="184,200,60">
<AREA href="top10.html"
alt="トップ10"
shape="poly"
coords="276,0,373,28,50,50,100,120">
</MAP>
<P><IMG src="navbar1.gif" usemap="#map1" alt="ナビゲーションバー">
<P>
<OBJECT data="navbar.png" type="image/png">
<OBJECT data="navbar.gif" type="image/gif">
この画像を代用する文章...
</OBJECT>
</OBJECT>
<P>
<OBJECT data="navbar.png" type="image/png" usemap="#map1">
<OBJECT data="navbar.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>このサイトの構成:
<A href="guide.html" shape="rect" coords="0,0,118,28">利用案内</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">直行</A> |
<A href="search.html" shape="circle" coords="184,200,60">検索</A> |
<A href="top10.html" shape="poly" coords="276,0,373,28,50,50,100,120">トップ10</A>
</MAP>
</OBJECT>
</OBJECT>
<MAP name="map1">
<P>
<A shape="circle" coords="100,200,50">使えません</A>
<A href="outer-ring-link.html" shape="circle" coords="100,200,250">使えます</A>
</MAP>
13.6.2
サーバ側イメージマップ（Server-side image maps）
<P><A href="http://www.acme.com/cgi-bin/competition">
<IMG src="game.gif" ismap alt="リンク目標"></A>
13.7
画像、オブジェクト、アプレットの視覚的表現（Visual presentation of images, objects, and applets）
13.7.1
幅と高さ（Width and height）
13.7.2
画像やオブジェクトの周囲の余白（White space around images and objects）
13.7.3
枠線（Borders）
13.7.4
配置（Alignment）
13.8
代替テキストの記し方（How to specify alternate text）