HTMLのマルチメディア機能によって,文書作成者は,画像,アプレット(自動的にダウンロードされ,利用者のマシンで実行されるプログラム),ビデオクリップ及びその他のHTML文書を,自分のページに取り込むことができる。
例えば,PNG画像を文書に取り込むためには,次を書けばよい。
<BODY> <P>Here's a closeup of the Grand Canyon: <OBJECT data="canyon.png" type="image/png"> This is a <EM>closeup</EM> of the Grand Canyon. </OBJECT> </BODY>
HTMLの以前の版では,文書作成者は,IMGを介して画像を,APPLETを介してアプレットを,それぞれ取り込めた。これらの要素には,幾つかの制限がある。
これらの問題のために,HTML 4.0は,OBJECT要素を導入する。この要素は,一般的なオブジェクト取込みに対して,あらゆる目的の解決法を提供する。OBJECT要素によって,HTML文書作成者は,ソースコード,初期値,実行時データなど,利用者エージェントによる表示に対してオブジェクトが要求するすべてのものを指定できる。この標準情報(TR)では,用語"オブジェクト"は,人間がHTML文書に置きたいものを記述するために使用する。これらのものに対して,一般的に使用される他の用語には,アプレット,プラグイン,メディアハンドラなどがある。
そこで,新しいOBJECT要素は,既存の要素によって実行されるタスクの幾つかを含む。機能に関し,次に表を示す。
取り込む型 | 固有要素 | 一般要素 |
---|---|---|
画像 | IMG | OBJECT |
アプレット | APPLET (推奨しない.) | OBJECT |
その他のHTML文書 | IFRAME | OBJECT |
表13.1は,取り込む型に対して,固有の解決法及び共通な解決法が存在することを示している。一般的なOBJECT要素は,将来的なメディア型を実装するための解決法として確保される。
画像を取り込むためには, 文書作成者は,OBJECT要素又はIMG要素を使用してよい。
アプレットを取り込むためには, APPLET要素は推奨しないので,文書作成者は,OBJECT要素を使用することが望ましい。
他のHTML文書にHTML文書を取り込むためには,文書作成者は,新しいIFRAME要素又はOBJECT要素のいずれかを使用してよい。どちらを使用する 場合も,埋め込まれた文書は,主文書には依存しないままとする。視覚的利用者エージェントは,主文書内の別のウィンドウに埋め込まれた文書を表示してもよい。文書の取込みについては,OBJECT及びIFRAMEの比較についての埋込み文書に関する備考を参照するのこと。
画像及び他の取り込まれたオブジェクトは,標準的なリンク機構及び 画像マップ の両方を通じて,関連付けられたハイパリンクをもってもよい。画像マップは,取り込まれたオブジェクトの活動する幾何学的領域を指定し,各領域にリンクを割り当てる。活性化時には,これらのリンクによって文書が検索され,サーバプログラムが実行されるなどが起こってよい。
13.の以降では,マルチメディア取込み及びその取込みのための画像マップ生成に対して,文書作成者が利用可能な様々な機構を示す。
<!-- 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) -- 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>I just returned from vacation! Here's a photo of my family at the lake: <IMG src="http://www.somecompany.com/People/Ian/vacation/family.png" alt="A photo of my family at the lake."> </BODY>
これは,OBJECT要素を用いて次のとおりに実現してもよい。
<BODY> <P>I just returned from vacation! Here's a photo of my family at the lake: <OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png" type="image/png"> A photo of my family at the lake. </OBJECT> </BODY>
alt属性は,画像を表示できない場合にレンダリングされる代替テキストを指定する。代替テキストの指定方法に関する情報については,次を参照すること。画像をサポートできない場合,ある画像型をサポートできない場合又は画像を表示しないように構成されている場合は,利用者エージェントは代替テキストをレンダリングしなければならない。
より豊富な記述へのリンクにlongdesc属性がどのように使用できるかを,次の例で示す。
<BODY> <P> <IMG src="sitemap.gif" alt="HP Labs Site Map" 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 %URI; #IMPLIED -- space separated archive list -- 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要素によって,文書作成者は,外部的に,又は利用者エージェント内のデータをレンダリングする文書作成者が指定するプログラムによって,データをレンダリングするのがよいかどうかを制御することができる。
最も一般な場合には,文書作成者が,情報の次の三つの型を指定することが必要になってもよい。
OBJECT要素によって,文書作成者はデータの三つの型をすべて指定することができるが,一度に三つ全部を指定する必要はないかもしれない。例えば,データを要求しないオブジェクトもある。小さなアニメーションを実演するそれ自体を含むアプレットがその例である。実行時初期化を要求しないオブジェクトもある。さらに,付加的な実装情報を要求としないオブジェクトもある。すなわち,利用者エージェントそれ自体は,GIF画像などのデータの型をレンダリングする方法を既に知っていてもよい。
文書作成者は,オブジェクトの実装,及びOBJECT要素を介してレンダリングされるデータの位置を指定する。しかし,実行時の値を指定するために,文書作成者は,PARAM要素を使用する。PARAM要素は,オブジェクトの初期化の箇所で示す。
OBJECT要素は,HEAD要素の内容に現われてもよい。利用者エージェントは,一般に,HEADにおける要素をレンダリングしないので,文書作成者は確実に,HEADのどのOBJECT要素もレンダリングするかもしれない内容を指定しないようにするのがよい。HEAD要素におけるOBJECT要素を取り込む例については,フレームデータの共有を参照すること。
フォームにおけるOBJECT要素に関する情報については,フォーム制御を参照すること。
利用者エージェントは,次の優先規則に従って,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"> An animated clock. </OBJECT>
OBJECT要素の設計の重要な結果の一つに,代替オブジェクトレンダリングを指定するための機構を提供することがある。すなわち,各々の埋込みOBJECT宣言は,代替となる内容型を指定してもよい。利用者エージェントは,最も外部にあるOBJECTをレンダリングできない場合,他のOBJECT要素であってよい内容をレンダリングしようと努力する。
次の例では,OBJECT宣言を幾つか埋め込み,代替レンダリングがどのように動作するかを示す。利用者エージェントは,次の順番で,レンダリングできる最初のOBJECT要素をレンダリングしようとする。すなわち,(1) Python言語で書かれたEarthのアプレット,(2) EarthのMPEGアニメーション,(3) EarthのGIF画像,及び(4) 代替テキストの順番である。
<P> <!-- First, try the Python applet --> <OBJECT title="The Earth as seen from space" classid="http://www.observer.mars/TheEarth.py"> <!-- Else, try the MPEG video --> <OBJECT data="TheEarth.mpeg" type="application/mpeg"> <!-- Else, try the GIF image --> <OBJECT data="TheEarth.gif" type="image/gif"> <!-- Else render the text --> The <STRONG>Earth</STRONG> as seen from space. </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 data..."> A clock. </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要素は,実行時にオブジェクトが要求してもよい値の集合を指定する。OBJECT要素又はAPPLET要素の内容に,PARAM要素が幾つも順序を問わず現われてもよいが,囲んでいるOBJECT要素又はAPPLET要素の内容の最初に置かれなければならない。
名前及び値の構文は,オブジェクトの実装によって理解されるものと仮定する。この規定では,利用者エージェントがどのように名前及び値の対を検索するのがよいかも,2度現われるパラメタ名をどのように解釈するのがよいかも規定しない。
時計の例に戻り,PARAMの使用例を示す。初期の高さ及び幅を定義する二つの実行時パラメタをアプレットが処理できると仮定する。二つのPARAM要素を用いて,初期の寸法を40x40画素に設定できる。
<P><OBJECT classid="http://www.miamachina.it/analogclock.py"> <PARAM name="height" value="40" valuetype="data"> <PARAM name="width" value="40" valuetype="data"> This user agent cannot render Python applications. </OBJECT>
次の例では,オブジェクトの"Init_values"パラメタに対する実行時データが,外部資源(GIFファイル)として指定されている。そこで,valuetype属性の値は"ref"に設定され,valueは資源を指定するURIとなる。
<P><OBJECT classid="http://www.gifstuff.com/gifappli" standby="Loading Elvis..."> <PARAM name="Init_values" value="./images/elvis.gif"> valuetype="ref"> </OBJECT>
レンダリング機構がロードする間に利用者エージェントがメッセージを表示してもよいとして,standby属性も設定したことに注意すること。
OBJECT要素がレンダリングされる場合,利用者エージェントは,直接の子供であるPARAM要素だけに対して内容を検索し,それらをOBJECTに送らなければならない。
そこで次の例では,"obj1"がレンダリングされる場合,"param1"は"obj2"ではなく"obj1"に適用される。"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"を使用してもよい。
<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"> This application is not supported. </OBJECT>
13.3の今までの例は,分離したオブジェクト定義を示しただけだった。文書が同じオブジェクトのインスタンスを一つ以上含む場合は,そのインスタンス化からオブジェクトの宣言を分離することができる。これによって,次の利点が生じる。
利用者エージェントが読み込まれた時に実行されないようにオブジェクトを宣言するために,論理型のdeclare属性をOBJECT 要素で設定する。同時に, 文書作成者は,OBJECT要素のid属性を一意な値に設定することによって,宣言を識別しなければならない。 後のオブジェクトのインスタンス化が,この識別子を表す。
OBJECTの宣言は,そのOBJECTの最初のインスタンスの前に,文書に現われなければならない。
declare属性をともなって定義されるオブジェクトは,例えば,そのオブジェクトを参照するリンクが活性化する,そのオブジェクトを参照するオブジェクトが活性化するなど,そのオブジェクトを参照する要素がオブジェクトのレンダリングを要求する場合は,常にインスタンス化される。
次の例では,OBJECTを宣言しているが,リンクからそれを参照することによってインスタンス化される。そこで,例えば,オブジェクトは,強調されたテキスト上でのクリックによって活性化できる。
<P><OBJECT declare id="earth.declaration" data="TheEarth.mpeg" type="application/mpeg"> The <STRONG>Earth</STRONG> as seen from space. </OBJECT> ...later in the document... <P>A neat <A href="#earth.declaration"> animation of The Earth!</A>
次の例は,他のオブジェクトである実行時の値を指定する方法を示す。この例では,テキスト(実際には詩)を,詩を表示するための仮想的な機構に送信する。オブジェクトは,(例えば,あるフォントで詩のテキストをレンダリングするために)"font"と命名された実行時パラメタを認識する。このパラメタに対する値は,それ自体,フォントオブジェクトを挿入するオブジェクトである。ただし,レンダリングはしない。フォントオブジェクトと詩の閲覧オブジェクトとの関係は, (1)id "tribune"をフォントオブジェクト宣言に割り当てることによって,及び (2)(valuetype及びvalueをともなった)詩の閲覧オブジェクトのPARAM要素からフォントオブジェクトを参照することによって, 実現される。
<P><OBJECT declare id="tribune" type="application/x-webfont" data="tribune.gif"> </OBJECT> ...view the poem in KublaKhan.txt here... <P><OBJECT classid="http://foo.bar.com/poem_viewer" data="KublaKhan.txt"> <PARAM name="font" valuetype="object" value="#tribune"> <P>You're missing a really cool poem viewer ... </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 that draws animated bubbles. </APPLET>
この例は,OBJECTを用いて次のとおりに書き替えることができる。
<P><OBJECT codetype="application/java" classid="java:Bubbles.class" width="500" height="500"> Java applet that draws animated bubbles. </OBJECT>
初期値をPARAM要素を介してアプレットに提供してもよい。
推奨しない例
次にJavaアプレットの例を示す。
<APPLET code="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> Java applet that plays a welcoming sound. </APPLET>
この例は,OBJECTを用いて次のとおりに書き替えることができる。
<OBJECT codetype="application/java" classid="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> Java applet that plays a welcoming sound. </OBJECT>
文書作成者が,ある文書へとリンクを張るのではなく,主となるHTML文書にターゲットとする文書を直接に埋め込みたいと考える場合もある。文書作成者は,この目的のために,IFRAME要素又はOBJECT要素のいずれかを使用してもよいが,これら要素は幾つかの点で異なっている。二つの要素は異なる内容モデルをもつだけでなく,IFRAME要素はターゲットフレーム(詳細については,ターゲットフレーム情報の指定を参照)であってもよく,HTMLソースの印刷,閲覧などの注目点として,利用者エージェントによって"選択される"場合があってもよい。利用者エージェントは,例えば,選択されたフレームの周囲に枠線を描くなど,選択されないフレームと区別して,選択されたフレーム要素をレンダリングしてもよい。
埋込み文書は,それが埋め込まれている文書に全く依存しない。例えば,埋込み文書内の相対URIは,主文書の基底URIではなく埋込み文書の基底URIに基づいて解決される。埋込み文書は,サブウィンドウの中など,他の文書内でだけレンダリングされる。そうでない場合は,非依存のままとする。
...text before... <OBJECT data="embed_me.html"> Warning: embed_me.html could not be embedded. </OBJECT> ...text after...
OBJECTの内容は,data属性によって指定されるファイルがロードされない場合にだけレンダリングされなければならないことを思い出して頂きたい。
ファイルがそれ自体を含む場合の利用者エージェントの振る舞いは,定義されない。
画像マップは,文書作成者が画像又はオブジェクトの領域を指定し,例えば,文書を検索する,プログラムを実行する,などの固有の動作を各領域に割り当てることを可能にする。利用者が領域を活性化する場合に,動作が実行される。
画像マップは,オブジェクトを,そのオブジェクトに対して反応する幾何学的領域の規定に関連付けることによって生成される。
画像マップには,次の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 -- >o
開始タグ: 必す(須),終了タグ: 禁止
AREA 属性定義
座標は,オブジェクトの上左隅に対して相対的とする。値はすべて長さとする。値はすべてコンマで区切る。
画像マップを要素に関連付ける属性
他の箇所で定義される属性
MAP要素は,一つ以上の要素(IMG, OBJECT又はINPUT)と関連付けられてもよいクライアント側画像マップを指定する。画像マップは,要素のusemap属性を介して,要素と関連付けられる。
OBJECTに対するusemap属性の存在は,取り込まれるオブジェクトが画像であることを意味する。さらに, OBJECT要素が関連するクライアント側画像マップをもつ場合,利用者エージェントは,クライアント側画像マップだけを使って,OBJECTとの利用者対話を実装してよい。これによって,音声ブラウザ,ロボットなどの利用者エージェントは,処理する必要なしにOBJECTと対話することができる。すなわち,利用者エージェントはオブジェクトを検索又は処理しない選択も可能とする。OBJECTが関連する画像マップをもつ場合,文書作成者は,オブジェクトがすべての利用者エージェントによって検索又は処理されることを期待しないほうがよい。
各MAP要素は,次のいずれか一つを含んでもよい。
二つ以上の定義された領域が重なる場合は,文書中で早く現われる領域定義要素を優先する。すなわち,優先されたものが利用者入力に応答する。
利用者エージェント及び文書作成者は,図形が利用できないか,又は利用者がそれらにアクセスできない場合には,図形的画像マップに代わるテキスト代替を提供するのがよい。例えば,利用者エージェントはaltテキストを使用して,図形的画像マップの位置にテキストリンクを生成してもよい。これらのリンクは,キーボード,音声活性化など,様々な方法で活性化される。
備考 MAPには,HTML2.0利用者エージェントとの下位互換性はない。
次の例では,OBJECT要素に対するクライアント側画像マップを生成する。OBJECTがレンダリングされる場合,画像マップの内容をレンダリングしたくはない。そのため,OBJECT要素の内容の中のMAP要素を"隠ぺいする"。その結果,MAP要素の内容がレンダリングされるのは,OBJECTがレンダリングできない場合だけとする。
<HTML> <HEAD> <TITLE>The cool site!</TITLE> </HEAD> <BODY> <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,100,120">Top Ten</A>< </MAP> </OBJECT> </BODY> </HTML>
利用者エージェントがOBJECTをレンダリングできない場合でも,画像マップの内容をレンダリングしたいことがある。例えば,画像マップを OBJECT要素と関連付け, さらにページの下側にテキストナビゲーションバーを取り込みたい場合もある。これをするために,OBJECT外部にMAP要素を定義する。
<HTML> <HEAD> <TITLE>The cool site!</TITLE> </HEAD> <BODY> <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> </OBJECT> ...the rest of the page here... <MAP name="map1"> <P>Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,100,120">Top Ten</A> </MAP> </BODY> </HTML>
次の例では,類似の画像マップを生成する。この場合は,AREA要素を使用している。alt テキストを使用する点に注意すること。
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <P>This is a navigation bar. </OBJECT> <MAP name="map1"> <AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28"> <AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28"> <AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60"> <AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,373,28,50,50,100,120"> </MAP>
次に,同じMAP宣言をもち,OBJECTの代わりにIMG要素を使用する類似の例を示す。
<P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">
次の例は,画像マップがどのように共有されるかを示す。
入れ子のOBJECT要素は,利用者エージェントがあるフォーマットをサポートしない場合の予備を提供するのに有益である。その例を次に示す。
<P> <OBJECT data="navbar.png" type="image/png"> <OBJECT data="navbar.gif" type="image/gif"> text describing the image... </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>Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,100,120">Top Ten</A> </MAP> </OBJECT> </OBJECT>
次の例は,アンカが画像マップ内の非活性的ゾーンを生成するためにどのように指定されるかを示す。最初のアンカは,関連リンクのない小さな円領域を指定する。2番目のアンカは,中心の座標を同じとするより大きな円領域を指定する。両者を組み合わせると,中央が非活性であって,周縁が活性なリングが形成される。小さい方の円が大きい方の円を上書きしなければならないので,アンカ定義の順序は重要である。
<MAP name="map1"> <P> <A shape="circle" coords="100,200,50">I'm inactive.</A> <A href="outer-ring-link.html" shape="circle" coords="100,200,250">I'm active.</A> </MAP>
同様に,AREA要素に対するnohref属性は,幾何学的領域が関連リンクをもたないことを宣言する。
サーバ側画像マップは,画像マップがクライアント側画像マップには複雑すぎる場合には,興味深いかもしれない。
サーバ側画像マップを定義できるのは,IMG要素及びINPUT要素だけとする。IMGの場合,IMGはA要素の内部になければならず,論理型の属性ismap([CI])が設定されていなければならない。INPUTの場合,INPUTは型"image"でなければならない。
利用者が画像をクリックすることによってリンクを活性化する場合は,画面座標は文書が存在するサーバに直接に送信される。画面座標は,画像に対して相対的な画面画素値として表現される。画素の定義及びそのスケール化の方法についての規定的情報は,[CSS1]を参照すること。
<P><A href="http://www.acme.com/cgi-bin/competition"> <IMG src="game.gif" ismap alt="target"></A>
クリックされた位置は,次のとおりにサーバに渡される。利用者エージェントは,コンマで区切られたx座標及びy座標の前に`?'を付加することによって,A要素のhref属性が指定するURIから新しいURIを導出する。その後は,その新しいURIを使用してリンクが続けられる。例えば,先の例では,利用者が x=10, y=27の位置でクリックすると,"http://www.acme.com/cgi-bin/competition?10,27"というURIが抽出される。
利用者に固有の座標を選択する手段を提供しない利用者エージェント,例えば,キーボード入力に依存する非図形的利用者エージェント,音声ベースの利用者エージェントなどは,リンクが活性化するとき,サーバに座標"0,0"を送信することが望ましい。
指定する場合は,width属性及びheight属性は,利用者エージェントに,これらの値の使用を優先し自然画像又はオブジェクトのサイズを上書きすることを知らせる。
オブジェクトが画像の場合,スケール化される。利用者エージェントは,文書作成者が指定する幅及び高さに一致させるために,オブジェクト又は画像をスケール化するように最善を尽くすことが望ましい。パーセントで表現される長さは,画像,オブジェクト又はアプレットの元のサイズではなく,現在利用できる水平方向のスペース又は上下方向のスペースに基づく点に注意すること。
height属性及びwidth属性は,利用者エージェントに画像又はオブジェクトのサイズに関するアイデアを提供する。その結果として,そのための空間を確保し,画像データを待つ間文書をレンダリングし続けてもよい。
vspace属性及びhspace属性は,IMG,APPLET及びOBJECTの左右(hspace)及び上下(vspace)に挿入される空白の合計を指定する。これらの属性のデフォルト値は規定しないが,一般に小さい非ゼロの長さとする。両属性とも型lengthの値をとる。
利用者が枠線を指定する場合とか,又は画像がA要素の内容である場合に,画像又はオブジェクトは,枠線で囲まれてもよい。
align属性は,文脈に関連するIMG,OBJECT又はAPPLETの位置を指定する。
alignに対する次の値は,まわりを囲むテキストに関するオブジェクトの位置に関連する。
他の二つの値,left及びrightによって,画像は,現在の左マージン又は右マージンに浮動する。これについては,オブジェクトの浮動で示す。
配置の解釈の相違。 利用者エージェントは,align属性の解釈を様々に行う。要素に先行するテキスト行上に発生するものを考慮するだけの利用者エージェントもあれば,要素の両側のテキストを考慮する利用者エージェントもある。
属性定義
幾つかの非テキスト要素(IMG,AREA,APPLET及びINPUT)によって,文書作成者は,要素が通常どおりにレンダリングできない場合に内容として提供される代替テキストを指定する。代替テキストを指定することによって,図形表示端末をもたない利用者,そのブラウザがフォームをサポートしない利用者,視覚的障害のある利用者,音声合成器を使用する利用者,画像を表示しないように図形的利用者エージェントを構成した利用者,などを支援する。
alt属性は,IMG要素及びAREA要素に対して指定されなければならない。INPUT要素及びAPPLET要素についてはオプションとする。
代替テキストは非常に有用かもしれないが,注意深く処理しなければならない。文書作成者は,次の指針を遵守することが望ましい。
省略される代替テキストの処理方法に関する情報については,実装者は,代替テキストの生成を参照することが望ましい。
備考 アクセスし易いHTML文書の設計についての更なる情報については,[WAIGUIDE]を参照すること。