目次
HTMLのマルチメディア機能を使うと、著者は、ページ中に、画像、アプレット(自動的にダウンロードされてユーザの機械で走るプログラム)、ビデオクリップ、外部HTML文書などを含めることができる。
例えば、文書にPNG画像を含めるために、著者は次のように書ける。
<BODY> <P>グランドキャニオンのアップです: <OBJECT data="canyon.png" type="image/png"> これはグランドキャニオンの<EM>アップ</EM>です。 </OBJECT> </BODY>
以前のバージョンのHTMLでは、著者はIMG要素によって画像を含めることができ、またAPPLET要素によってアプレットを含めることができた。しかしこの2つの要素には、幾つかの限界がある。
これらの問題に対処するため、HTML 4ではOBJECT要素を導入する。 これは、あらゆる目的に適う、一般的オブジェクト包含の解決策を提供するものである。 OBJECT要素を使うと、HTML著者は、ユーザエージェントがオブジェクトをプレゼンテーションするのに必要なすべて――すなわちソースコード、初期値、実行時データ――を指定できる。 本仕様では、「オブジェクト」という語を、人々がHTML文書中に置きたいと考えるようなモノを示すために用いる。そうしたモノについて示す語としては、一般に、アプレット、プラグイン、メディアハンドラ等が使われる。
OBJECT要素は、既存の要素の働きの幾つかを受け継ぐものとなっている。 働きをまとめた、次の表を検討されたい。
| 含めたいもの | 特定要素 | 一般要素 |
|---|---|---|
| 画像 | IMG | OBJECT |
| アプレット | APPLET (推奨しない。) | OBJECT |
| 他のHTML文書 | IFRAME | OBJECT |
この表は、どの形式を埋め込むにも、特殊解と一般解があるということを示している。 OBJECT要素は、将来のデータ形式を実装する場合の解決策にもなる。
画像を含めるには、著者はOBJECT要素かIMG要素のどちらを使ってもよい。
アプレットを含めるには、著者はOBJECT要素を用いるべきである。なぜならAPPLET要素は推奨されないからだ。
あるHTML文書を他のHTML文書に含めるには、著者は新登場の IFRAME要素かOBJECT要素のどちらを用いてもよい。 どちらの場合でも、埋め込まれた文書は主文書から独立した状態のままである。 視覚系ユーザエージェントは、埋め込まれた文書を、主文書中の、異なるウインドウでプレゼンテーションしてよい。 文書の埋め込みに関する OBJECT要素とIFRAME要素の比較については、埋め込み文書に関する注意の項を参照されたい。
画像及び他の埋め込みオブジェクトには、ハイパーリンクが関連づけられることもできる。そのリンクは、標準的リンク機構でも、イメージマップでもよい。 イメージマップとは、埋め込みオブジェクトに反応領域を指定し、各領域にリンクを割り当てるものである。 アクティブにされると、そのリンクは、文書の取得や、サーバでのプログラムの実行などを引き起こす。
以下の各節では、マルチメディアの埋め込みや、埋め込んだものでイメージマップを生成するために、著者が利用できる様々な機構を説明する。
<!-- 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 -- src %URI; #REQUIRED -- URI of image to embed -- alt %Text; #REQUIRED -- short description -- longdesc %URI; #IMPLIED -- link to long description (complements alt) -- name CDATA #IMPLIED -- name of image for scripting -- height %Length; #IMPLIED -- override height -- width %Length; #IMPLIED -- override width -- usemap %URI; #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- >
開始タグ: 必須、終了タグ: なし
属性定義
別途定義がある属性
IMG要素は、現在文書中の、当該要素定義箇所に、画像を埋め込む。 IMG要素に内容はない。 通常はsrc属性が指し示す画像と行の中で置き換えられるが、左寄せや右寄せにされた画像は行の外に「浮動」する。
本書では、以前、家族写真のリンクを例示した。ここでは現在文書に写真を直接挿入することとする。
<BODY>
<P>旅行から戻りました! 湖畔での家族写真です:
<IMG src="http://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属性は、画像が表示できない場合にのみレンダリングされる、代替テキストを指定する(これについては、後述の代替テキストの指定方法の項を見よ)。 ユーザエージェントは、画像をサポートしていないか、ある特定の画像形式をサポートしていないか、または画像を表示しないよう設定されているような場合にのみ、代替テキストを表示するようにしなければならない。
次に、longdesc属性をどう使って詳しい説明へとリンクするのかを例示する。
<BODY>
<P>
<IMG src="sitemap.gif"
alt="HP Labのサイトマップ"
longdesc="sitemap.html">
</BODY>
alt属性は、画像についての短い説明を提供する。 その内容は、ユーザにとって、 longdesc属性が指定する長文説明――この例では「sitemap.html」――へのリンクを辿るかどうかを判断するのに十分な内容である必要がある。
画像の大きさや、配置、ボーダーなどについては、オブジェクト、画像、アプレットの視覚的プレゼンテーションの項を参照されたい。
<!ELEMENT OBJECT - - (PARAM | %flow;)* -- generic embedded object --> <!ATTLIST OBJECT %attrs; -- %coreattrs、%i18n、%events -- declare (declare) #IMPLIED -- declare but don't instantiate flag -- classid %URI; #IMPLIED -- identifies an implementation -- codebase %URI; #IMPLIED -- base URI for classid, data, archive-- data %URI; #IMPLIED -- reference to object's data -- type %ContentType; #IMPLIED -- content type for data -- codetype %ContentType; #IMPLIED -- content type for code -- archive CDATA #IMPLIED -- space-separated list of URIs -- standby %Text; #IMPLIED -- message to show while loading -- height %Length; #IMPLIED -- override height -- width %Length; #IMPLIED -- override width -- usemap %URI; #IMPLIED -- use client-side image map -- name CDATA #IMPLIED -- submit as part of form -- tabindex NUMBER #IMPLIED -- position in tabbing order -- >
開始タグ: 必須、終了タグ: 必須
属性定義
別途定義がある属性
ほとんどのユーザエージェントは、 テキスト、GIF画像、色、フォント、その他幾つかのグラフィック要素などの、一般的データ形式をレンダリングするための内部機構を備えている。 自前ではサポートしていないデータ形式をレンダリングするために、ユーザエージェントは一般に、外部アプリケーションを走らせる。 OBJECT要素を使うと、著者は、データを外部的にレンダリングすべきなのか、著者が指定するプログラムによってユーザエージェント内でレンダリングすべきなのかを制御できる。
一般的には、著者は次の3種類の情報を指定する必要があるであろう。
OBJECT要素を使うと、著者は、この3種のデータすべてを指定できる。 しかし、著者が3つを一度に指定する必要がない場合もあるであろう。 例えば、データ自体を含んでいてちょっとしたアニメーションとして働くアプレットなど、オブジェクトによってはデータを必要としないものもあるだろう。 また、実行時の初期化を必要としないものもあるだろう。 更に、GIF画像などのようにユーザエージェント自身にとって当該データ形式のレンダリング方法が既知であるために、実装情報の追加が不用であるような場合もあるであろう。
著者は、オブジェクト実装とレンダリング対象データの所在をOBJECT要素によって指定する。 一方、実行時の値を指定するのに、著者はPARAM要素を用いる。 これについてはオブジェクトの初期化の項で説明する。
OBJECT要素は、HEAD要素の内容として出現し得る。 ユーザエージェントは一般にHEADにある要素をレンダリングしないので、著者は、HEADにあるすべてのOBJECT要素について、レンダリングされるような内容を持たせないようにする必要がある。 HEAD要素中に OBJECT要素を含ませる例については、フレームデータの共有の項を参照されたい。
フォーム中のOBJECT要素については、フォームのコントロールに関する項を参照されたい。
本仕様は、実装を識別するためのclassid属性と、実装に渡すデータを指定するdata属性とを同じOBJECT要素で指定する場合の挙動は規定しない。 移植性を高めるため、著者は、追加データを取得できる場所を実装に示すには、PARAM要素を用いる必要がある。
ユーザエージェントは、次の優先規則にしたがってOBJECT要素を解釈しなければならない。
著者は、 HEAD要素中に出現するOBJECT要素には、内容を含めないようにする必要がある。
次の例では、OBJECT要素によってアナログ時計のアプレットが文書に埋め込まれている。このアプレットは、Python言語で書かれており、追加的データや実行時の値を必要としない。 classid属性で、アプレットの所在が指定されている。
<P><OBJECT classid="http://www.miamachina.it/analogclock.py"> </OBJECT>
この時計は、ユーザエージェントが当該のOBJECT宣言を解釈するとすぐにレンダリングされるという点に注意されたい。 オブジェクトのレンダリングを、当該オブジェクトの最初の宣言よりも遅延させることも可能である。これについては後述する。
著者は、ユーザエージェントが時計をレンダリングできない場合のためにOBJECT要素の内容として代替テキストを記し、上記の宣言を完成させる必要がある。
<P><OBJECT classid="http://www.miamachina.it/analogclock.py"> アニメーションする時計。 </OBJECT>
OBJECT要素の重要な設計目標の1つに、代替オブジェクトレンダリングを指定するための機構を提供することが挙げられる。 埋め込まれるOBJECT宣言は、どれも、代替オブジェクトを指定し得る。 最も外側のOBJECTをレンダリングできない場合、ユーザエージェントは、内容のレンダリングを試みるが、その内容が別のOBJECT要素等であっても構わないのである。
次に、代替レンダリングの働きを説明するために、複数のOBJECT宣言を埋め込んだ例を示す。 ユーザエージェントは、次の順番で、自分がレンダリングできる最も最初のOBJECT要素をレンダリングしようと試みる。 (1) Python言語で書かれた地球アプレット。 (2) 地球のMPEGアニメーション。 (3) 地球のGIF画像。 (4) 代替テキスト。
<P> <!-- 最初にPythonアプレットに挑戦 -->
<OBJECT title="宇宙から見た地球"
classid="http://www.observer.mars/TheEarth.py">
<!-- 次にMPEGビデオに挑戦 -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- 次にGIF画像に挑戦 -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- だめならテキストをレンダリングする -->
宇宙から見た<STRONG>地球</STRONG>。
</OBJECT>
</OBJECT>
</OBJECT>
最も外側の宣言は、データや初期値を必要としないアプレットを指定している。 2番目の宣言は、MPEGアニメーションを指定しており、MPEGを処理する実装の所在を定めていないので、アニメーションが処理されるかどうかはユーザエージェントに依存する。 ここではtype属性も指定し、MPEGをレンダリングできないユーザエージェントがネットワークからTheEarth.mpegを取得しなくてすむようにしてある。 3番目の宣言はGIFファイルの所在を指定し、更に全ての機構が働かなかった場合のための代替テキストを含んでいる。
行内データ対外部データ。 レンダリング対象のデータは、行内あるいは外部リソースの、2つの方法で供給され得る。 行内の場合は概してレンダリングが早いが、大量のデータをレンダリングするには不便である。
次に、どのように行内データをOBJECTに供給するのかを例示する。
<P>
<OBJECT id="clock1"
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, …base64のデータ…">
時計。
</OBJECT>
オブジェクトの大きさ、配置、ボーダーについては、オブジェクト、画像、アプレットの視覚的プレゼンテーションの項を参照されたい。
<!ELEMENT PARAM - O EMPTY -- named property value --> <!ATTLIST PARAM id ID #IMPLIED -- document-wide unique id -- name CDATA #REQUIRED -- property name -- value CDATA #IMPLIED -- property value -- valuetype (DATA|REF|OBJECT) DATA -- How to interpret value -- type %ContentType; #IMPLIED -- content type for value when valuetype=ref -- >
開始タグ: 必須、終了タグ: なし
属性定義
PARAM要素は、オブジェクトが実行時に必要とするような値の集合を指定する。 1つのOBJECT要素または APPLET要素の内容に、PARAM要素は幾つ出現してもよく、どんな順序であってもよいが、これを包含するOBJECT要素あるいはAPPLET要素の、内容の先頭部分に置かれていなければならない。
名前及び値の構文は、オブジェクト実装によって理解されるものと仮定する。本仕様は、ユーザエージェントが名前/値の組をどのように取得する必要があるかについても、また二度出現するパラメータ名をどのように解釈すべきかについても、規定しない。
次に、再度時計の例を用いて、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="./images/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で与えられる。 URIの概説の項で説明した通り、絶対URIの最初の部分はそのURIが指し示すデータの転送に用いる命名スキームを指定する。 HTML文書の場合、スキームは大概「http」である。 アプレットによっては他の命名スキームを採用するものもあるであろう。 例えば、Javaアプレットを指定する場合、著者は「java」で始まるURIを用いてもよく、ActiveXアプレットの場合は「clsid」を用いてよい。
次の例では、JavaアプレットがHTML文書に埋め込まれている。
<P><OBJECT classid="java:program.start"> </OBJECT>
codetype属性を設定することで、ユーザエージェントは、自身に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>
次の例では、classid属性で、clsid命名スキームで始まるURIによってActiveXオブジェクトの所在を指定している。 data属性は、レンダリングすべきデータ(他の時計)の所在を定めている。
<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="http://www.acme.com/ole/clock.stm">
このアプリケーションはサポートされていません。
</OBJECT>
ここまでの例では、単独のオブジェクト定義のみを説明してきた。 仮に文書が1つのオブジェクトの複数のインスタンスを含む場合、オブジェクトの宣言とインスタンス化を分離することが可能である。 宣言と実体化の分離には、幾つかの利点がある。
あるオブジェクトの宣言で、ユーザエージェントの読み込み時点で即実行されることを避けるためには、論理型属性のdeclareをOBJECT要素に設定する。 同時に、著者は、OBJECT要素のid属性を一意な値に設定し、当該宣言を識別しなければならない。 後にオブジェクトをインスタンス化する際に、この識別子が参照される。
宣言されるだけのOBJECT要素は、最初のOBJECTインスタンスよりも前に、文書に出現しなければならない。
declare属性を伴って定義されるオブジェクトは、当該オブジェクトを参照する要素がオブジェクトのレンダリングを要求する度に、インスタンス化される。 そうした要求は、例えばオブジェクトを参照するリンクがアクティブにされたり、当該オブジェクトを参照する他のオブジェクトがアクティブになったりすることで、生じる。
次の例で宣言しているOBJECTは、リンクによって参照されることでインスタンス化される。 そこで、強調されているテキストをクリックすることなどによって、このオブジェクトはアクティブになる。
<P><OBJECT declare
id="earth.declaration"
data="TheEarth.mpeg"
type="application/mpeg">
宇宙から見た<STRONG>地球</STRONG>。
</OBJECT>
…中略…
<P>イケてる<A href="#earth.declaration">地球のアニメーション!</A>
次の例は、実行時の値として他のオブジェクトを指定する方法を示す。 この例では、詩であるテキストを詩文閲覧用の仮設的機構に送っている。 詩テキストを特定のフォントでレンダリングするため、このオブジェクトは、「font」と命名された実行時パラメータを認識する。 このパラメータ値は、それ自体が1つのオブジェクトであり、フォントオブジェクトを挿入する(ただしレンダリングはしない)ものである。 フォントオブジェクトと詩文閲覧オブジェクトの間の連携は、 (1) id属性値 "tribune" をフォントオブジェクト宣言に割り当て、 (2) referring to it from the 詩文閲覧オブジェクトのPARAM要素から、valuetype属性とvalue属性を用いてidを参照することで、実現される。
<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>
declare属性をサポートしないユーザエージェントは、OBJECT宣言の内容をレンダリングしなければならない。
正式な定義については移行型DTDを参照のこと。
属性定義
アプレットが「復元」される際、start()メソッドは呼び出されるが、init()メソッドは呼び出されない。 元のオブジェクトが直列化される時に有効だった属性は、リストアされない。 当該APPLETインスタンスに渡されるどんな属性も、このアプレットで利用できる。 この特徴を用いる際に、著者は最大限の注意を払う必要がある。 直列化する際にはアプレットは停止しておくべきである。
code属性かobject属性のどちらか一方が存在しなければならない。 もしcode属性とobject属性の両方があった際は、双方が異なるクラス名を提供する場合のみがエラーである。
別途定義がある属性
Java対応ブラウザのすべてがサポートしているこの要素を使うと、設計者は、HTML文書にJavaアプレットを埋め込むことができる。 この要素は推奨しないこととし、代わりにOBJECT要素を奨める。
APPLET要素の内容は、アプレットをサポートしていないユーザエージェントや、サポートしないよう設定されているユーザエージェントに対する、代替情報として働く。 それ以外のユーザエージェントは、内容を無視しなければならない。
推奨しない例:
次の例では、APPLET要素がJavaアプレットを文書に埋め込んでいる。
codebase属性が与えられていないので、このアプレットは現在文書と同じディレクトリにあると仮定される。
<APPLET code="Bubbles.class" width="500" height="500"> 泡が動き回るJavaアプレットアニメーション。 </APPLET>
上の例は、OBJECT要素によって次にように書き直せる。
<P><OBJECT codetype="application/java"
classid="java:Bubbles.class"
width="500" height="500">
泡が動き回るJavaアプレットアニメーション。
</OBJECT>
アプレットの初期値は、PARAM要素で与え得る。
推奨しない例:
前者のJavaアプレット例は:
<APPLET code="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> 歓迎の音楽を奏でるJavaアプレット。 </APPLET>
OBJECT要素で次のように書き換え得る:
<OBJECT codetype="application/java"
classid="AudioItem"
width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
歓迎の音楽を奏でるJavaアプレット。
</OBJECT>
著者は、他の文書にリンクするのではなく、元HTML文書に直接埋め込みたいと考えることもあるであろう。 そうした目的に、著者は IFRAME要素かOBJECT要素のどちらを用いてもよいが、両要素には幾つか異なる点がある。 両者の内容モデルが異なるだけでなく、 IFRAME要素は目標フレーム(詳しくは目標フレーム情報の指定の項を参照せよ)となることができ、さらにユーザエージェントによって印刷やHTMLソース表示等のフォーカス対象として「選択する」こともできる。 ユーザエージェントは、例えば選択フレームの周囲にボーダーを描くなどして、選択したフレーム要素と選択されないフレームとを区別するようにレンダリングするであろう。
埋め込み文書は、それを含む元文書とは完全に独立している。 例えば、埋め込み文書の相対URIは、元文書の基本URIではなく埋め込み文書の基本URIを用いて解決される。 埋め込み文書は、単に子ウインドウなどで他の文書の中にレンダリングされるだけであり、他の点では独立した存在なのである。
例えば、次は、OBJECT定義がある位置にembed_me.htmlの内容を埋め込むものである。
…前略… <OBJECT data="embed_me.html"> 注意: embed_me.html を埋め込めません。 </OBJECT> …後略…
OBJECT要素の内容が、data属性で指定されるデータがロードできない場合に限ってレンダリングされねばならないという点を、思い起こされたい。
当該文書ファイル自体が自分自身に埋め込まれているケースを扱うユーザエージェントの挙動は、規定しない。
イメージマップを使うと、著者は、画像やオブジェクトに複数領域を指定し、各領域に対して、文書の取得やプログラムの実行などの動作を指定することができる。 領域がユーザによってアクティブにされると、その動作が始まる。
イメージマップは、オブジェクトに対して当該オブジェクト上の反応可能領域指定を関連づけることによって生成される。
イメージマップには次の2種類がある。
クライアント側イメージマップの方が、サーバ側イメージマップよりも、少なくとも次の2点で優れている。 まず、非グラフィック系ユーザエージェントでブラウズしている人々にとってもアクセス性がよい点。そして、ポインタが反応領域上にあってもなくても即座に結果が返る点である。
<!ELEMENT MAP - - ((%block;) | AREA)+ -- client-side image map --> <!ATTLIST MAP %attrs; -- %coreattrs、%i18n、%events -- name CDATA #REQUIRED -- for reference by usemap -- >
開始タグ: 必須、終了タグ: 必須
<!ELEMENT AREA - O EMPTY -- client-side image map area --> <!ATTLIST AREA %attrs; -- %coreattrs、%i18n、%events -- shape %Shape; rect -- controls interpretation of coords -- coords %Coords; #IMPLIED -- comma-separated list of lengths -- href %URI; #IMPLIED -- URI for linked resource -- nohref (nohref) #IMPLIED -- this region has no action -- alt %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 -- >
開始タグ: 必須、終了タグ: なし
AREA要素の属性定義
座標は、オブジェクトの左上隅からの相対値とする。すべての値は長さである。 値はすべて、コンマで区切る。
ある要素をイメージマップに関連づける属性
別途定義がある属性
MAP要素は、他の要素と関連づけられる、クライアント側イメージマップ(あるいは他のナビゲーション機構)を指定する。関連づけられる要素は、IMG、OBJECT、INPUTである。 イメージマップは、 usemap属性を通じて他と関連づけられる。 MAP要素は、画像との関連抜きで、一般的ナビゲーション機構として用いてもよい。
あるOBJECT要素にusemap属性が存在している場合、それはこの要素に画像が含まれていることを暗示している。 さらにまた、このOBJECT要素がクライアント側イメージマップと連携している場合、ユーザエージェントは、クライアント側イメージマップだけを用いて、ユーザとOBJECTとの対話を実装してよい。 これによって、音声ブラウザやロボットなどのユーザエージェントは、OBJECTとの対話を、OBJECTの処理抜きで実現でき、更にユーザエージェントはオブジェクトを取得したり処理したりしないと決断してもよい。 OBJECTとイメージマップが連携している場合、著者は、すべてのユーザエージェントが当該オブジェクトを取得したり処理したりするとは期待しないようにすべきである。
MAP要素の内容モデルは、著者に対し、次のどれかを含むことを許容する。
1つのMAP要素が混合内容、すなわちAREA要素及びブロックレベル内容の両方を含む場合、ユーザエージェントは、AREA要素を無視しなければならない。
著者は、イメージマップの区割りを、AREA要素で完成させるか、A要素で完成させるか、または混合内容の場合はその両方で完成させる必要がある。 著者は、古いユーザエージェントが AREA要素で指定される区割りを扱い、新しいユーザエージェントが機能豊富なブロック内容の扱いに長けていることから、混合内容を用いたいと考えるであろう。
2つ以上の区割りが重なり合っている場合、文書中で最も早く出現する領域定義要素が優先し、ユーザ入力に反応する。
ユーザエージェント及び著者は、グラフィックが得られない場合やユーザエージェントがグラフィックにアクセスできない場合のために、グラフィック系イメージマップに関する代替テキスト内容を提供する必要がある。 例えば、ユーザエージェントは、altテキストを用いてグラフィック系イメージマップの位置にテキストリンクを生成してよい。 こうしたリンクは、キーボード入力や音声入力など、様々な方法でアクティブにできる。
注意。 MAPには、HTML 2.0ユーザエージェントとの後方互換性はない。
次の例では、OBJECT要素に対応するクライアント側イメージマップが生成されている。 OBJECT要素がレンダリングされる場合にはイメージマップの内容をレンダリングさせたくないので、OBJECT要素の中に MAP要素を「隠して」いる。 言い換えると、MAP要素の内容は、OBJECTがレンダリングできない場合にのみレンダリングされる。
<HTML>
<HEAD>
<TITLE>クールなサイト!</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,276,28,100,200,50,50,276,0">トップ10</A>
</MAP>
</OBJECT>
</BODY>
</HTML>
OBJECTがレンダリングされる場合であってもイメージマップの内容をレンダリングさせたいと望むこともあるであろう。 例えば、OBJECT要素とイメージマップを連携させつつ、同時にページの冒頭と末尾にテキストのナビゲーションバーを配置したいといった場合である。 この目的により、次の例では、MAP要素をOBJECTの外で定義している。
<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,276,28,100,200,50,50,276,0">トップ10</A>
</MAP>
</BODY>
</HTML>
次の例では、上と同等のイメージマップを、AREA要素を用いて生成している。 altテキストの用法に注意されたい。
<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,276,28,100,200,50,50,276,0">
</MAP>
今度は、これまでと同じMAP宣言を用い、OBJECT要素の代わりにIMG要素を使用する類例を示す。
<P><IMG src="navbar1.gif" usemap="#map1" alt="ナビゲーションバー">
次の例では、イメージマップの共有方法を示す。
入れ子のOBJECT要素は、ユーザエージェントが特定データ形式をサポートしていない場合の代替手段を提供するのに有用である。
<P>
<OBJECT data="navbar.png" type="image/png">
<OBJECT data="navbar.gif" type="image/gif">
…画像を説明するテキスト…
</OBJECT>
</OBJECT>
ユーザエージェントがPNG形式をサポートしていない場合、GIF画像のレンダリングを試みる。例えば音声出力ユーザエージェントなど、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,276,28,100,200,50,50,276,0">トップ10</A>
</MAP>
</OBJECT>
</OBJECT>
次の例は、イメージマップの反応不能領域を生成する目的で、どのようにアンカーを指定し得るかを説明している。 最初のアンカーは、関連リンクを持たない小さな円形領域を指定している。 2番目のアンカーは、中心が等しい、大きな円形領域を指定している。 この両者によって、中心部が反応不能で周辺部が反応可能となっている環状領域が形成される。 小さい円で大きい円を上書きしなければならないので、アンカー定義の順序が重要である。
<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>
同様に、AREA要素のnohref属性は、当該領域に関連リンクがないことを宣言する。
サーバ側イメージマップは、クライアント側イメージマップで扱うにはイメージマップがあまりに複雑であるような場合に魅力的な手段となるであろう。
サーバ側イメージマップを定義できるのは、IMG要素とINPUT要素だけである。 IMG要素の場合はA要素中になければならず、かつ論理型属性のismap ([CI])が設定されていなければならない。 INPUT要素の場合は、そのtype属性が"image"でなければならない。
ユーザが画像をクリックしてリンクをアクティブにすると、文書が存在するサーバへとスクリーン座標が直接送られる。 スクリーン座標は画像に相当するスクリーンピクセル値として表現される。 ピクセル及びその計測方法に関する規範的情報は、[CSS1]を参照されたい。
次の例では、反応可能領域がサーバ側リンクを定めている。 そこで、画像のどこをクリックしても、クリック地点の座標がサーバに送られる。
<P><A href="http://www.acme.com/cgi-bin/competition">
<IMG src="game.gif" ismap alt="狙撃地点"></A>
クリック地点は、次のようにしてサーバに渡される。 ユーザエージェントは、A要素のhref属性が指定するURIに、「?」、「x座標」、「,」、「y座標」の順で付け足した、新しいURIを導き出す。 この新しいURIに基づいて、リンクが辿られる。 例えば上の例で、ユーザがx=10でy=27の地点をクリックしたとすると、導き出されるURIは「http://www.acme.com/cgi-bin/competition?10,27」である。
例えば非グラフィック系ユーザエージェントでキーボード入力に依存しているとか、音声ベースのユーザエージェントなど、ユーザに対して特定座標を選ぶ手段を提供しないユーザエージェントは、リンクがアクティブにされた際に、座標「0,0」をサーバに送る必要がある。
指定されている場合、 width属性とheight属性は、ユーザエージェントに対し、画像やオブジェクトの本来の幅や高さを指定値で上書きするよう指示する。
オブジェクトが画像である場合、これは伸縮される。ユーザエージェントはオブジェクトあるいは画像を、著者が指定する幅や高さに合致するよう伸縮させるのに最善を尽くす必要がある。 ここで、大きさがパーセントで指定されていた場合、これが、画像、オブジェクト、アプレットの元々の大きさに対する比率ではなく、利用可能な垂直・水平方向の空間に対する比率であることに、注意されたい。
height属性とwidth属性は、ユーザエージェントに対して画像やオブジェクトの大きさに関する概念を知らせるので、ユーザエージェントは画像やオブジェクトに割り当てる空間を予約し、そのデータが届くのを待っている間も文書のレンダリングを継続できる。
属性定義
画像あるいはオブジェクトは、ボーダーで囲ってもよい。例えばユーザによって指定された場合や、画像がA要素の内容である場合など。
次のalign属性値は、周囲のテキストとオブジェクトとの位置に関係する。
残りの値であるleftとrightは、オブジェクトを現在の左あるいは右マージンへ浮動させる。 これについては浮動オブジェクトの項で説明する。
配置解釈の違い。 ユーザエージェント間には、alignの解釈に違いがある。 あるものは当該要素の前にあるテキストの行しか考慮せず、あるものは当該要素の前後両方のテキストを考慮する。
非テキスト系の要素である、IMG、AREA、 APPLET、INPUT要素は、著者に対し、当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。 代替テキストを指定すると、グラフィックディスプレイ端末がないユーザ、フォーム非対応のブラウザを使っているユーザ、視覚障害のあるユーザ、音声合成装置のユーザ、グラフィック系ユーザエージェントを画像を表示しない設定で使っているユーザ、等の助けになる。
alt属性は、IMG要素とAREA要素では必ず指定しなければならない。 INPUT要素とAPPLET要素では任意選択である。
代替テキストは非常に役立つものであり得るが、取り扱いには注意しなければならない。著者は次の指針を守る必要がある。
実装者は、代替テキストが欠落しているケースをどう扱うかについて、アクセス性の項を参照する必要がある。