<AREA> | NN すべて IE すべて HTML 3.2 | |||||||||
<AREA> | HTML 終了タグ : 使用不可 | |||||||||
map 要素は、ページ上の領域を占めるイメージや他のオブジェクトに最終的に関連付けられるクライアント側のイメージマップを定義します。map 要素の唯一の役割は area 要素の定義に対して名前とタグコンテキストを指定することです。各 area 要素は、イメージまたはその他のオブジェクトの特定の場所で行われるユーザーからの操作に対するページの応答方法を定義します。 クライアント側のイメージマップのリンク領域は a 要素リンクのように機能します。この領域はリンク先または javascript: の擬似 URL にリンクされます。area 要素には新しいドキュメントの読み込み先になる別のフレームまたはウィンドウも指定できます。実際、元々のスクリプト DOM では area 要素はリンクと見なされます。フレームセットの細いフレームに表示されるナビゲーションバーでクライアント側のイメージマップを使用することもよくあります。この場合、アート部分のデザイナはメニューを自由に設計でき、ページの作成者は大きなイメージの個々の部分を特定の用途のリンクにできます。 |
||||||||||
例 | ||||||||||
<MAP name="nav"> <AREA coords="20,30,120,70" href="contents.html" target="display"> <AREA coords="20,80,145,190" href="contact.html" target="display"> </MAP> |
||||||||||
オブジェクト参照 | ||||||||||
[window.]document.links[i]
[window.]document.getElementById(elementID)
|
||||||||||
要素固有の属性 | ||||||||||
|
||||||||||
要素固有のイベントハンドラー属性 | ||||||||||
なし |
accesskey | NN 6 (テキストを参照) IE 4/5 HTML 4 (テキストを参照) |
accesskey="character" | オプション |
要素にフォーカスを移動したり (一部のブラウザ)、フォームコントロールやリンクアクションをアクティブにしたりする単一の文字キー。リンクをアクティブにするためにアクセスキーと一緒に修飾キー (Ctrl、Alt、または Command) を押す必要があるかどうかは、使用するブラウザと OS によって決まります。Windows 版 IE 4 以降および Netscape 6 では、Alt キーを押す必要があり、文字キーの大文字と小文字は区別されません。Macintosh 版 IE 5 以降および Netscape 6 では、アクションを実行するには Ctrl キーを押す必要があります。 ここに示されている accesskey は広く使用されている共通属性ですが、すべての実装において厳密に共通というわけではありません。HTML 4 および Netscape 6 でこの属性が認識される要素は、a、area、button、input、label、legend、および textarea だけです。IE 4 では、これに applet、body、div、embed、isindex、marquee、object、select、span、table、および td が追加されています。ただし、label および legend は削除されました。IE 5 では、他のすべての表示可能な要素が追加されていますが、注意が必要です。input 要素とその他のフォーム関連要素の場合を除き、IE 5 以降ではアクセラレータキーの組み合わせで要素にフォーカスを移動するには、要素に tabindex 属性も (すべての値が 0 の場合でも) 指定する必要があります。 |
|
例 | |
<A href="http://www.megacorp.com/toc.html" accesskey="t">Table of Contents</A> <H2 class="subsection" accesskey="2" tabindex="0">Part Two</H2> |
|
値 | |
ドキュメントセットの単一の文字 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.links[i].accessKey [window.]document.anchors[i].accessKey [window.]document.formName.elementName.accessKey [window.]document.forms[i].elements[j].accessKey [window.]document.getElementById(elementID).accessKey |
alt | NN 6 IE 3 HTML 3.2 |
alt="textMessage" | 必要 |
テキストベースのブラウザは alt 属性の設定を使用して、表示されないイメージのホットスポットの簡単な説明を表示できます。以前はデフォルトで、領域にフォーカスがあるときかカーソルを置いたときに、ブラウザのステータスバーに alt メッセージが表示されていることがありました。現在、この機能は通常は onmouseover イベントハンドラーとスクリプトによって実行されます。最近のハンドヘルドコンピュータには通常、テキストベースのブラウザか、またはパフォーマンス向上のためにグラフィックを非表示にできるブラウザがインストールされていることを忘れないでください。また、視覚障害のあるユーザーのことも考慮する必要があります。 |
|
例 | |
<AREA coords="20,30,120,70" href="contents.html" target="display" alt="Table of Contents"> |
|
値 | |
引用符で囲んだ文字列 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).alt
|
coords | NN すべて IE すべて HTML 3.2 |
coords="coord1, ... coordN" | オプション |
W3C による正式な定義では area 要素の coords 属性は省略可能ですが、この属性を指定しなくても area が正しく機能するわけではありません。coords 属性は特定のリンクやスクリプトによるアクションに関連付けられた領域のアウトラインを定義します。サードパーティ製のオーサリングツールの中には、ホットエリアの座標点の設定を支援する機能を備えたものもあります。カーソルの位置をリアルタイムで表示できるグラフィックプログラムにイメージを読み込み、表示された値を coords 属性の値としてコピーして使用することもできます。 座標値はコンマで区切って入力します。2 つの領域が重なった場合は、HTML コードで最初に定義された方の領域が優先されます。 |
|
例 | |
<AREA coords="20,30,120,70" href="contents.html" target="display"> |
|
値 | |
各座標は長さの値ですが、座標の数とその順番は shape 属性で指定したシェープによって異なります。shape 属性は要素に関連付けることもできます。shape="rect" には 4 つの座標 (左、上、右、下) があり、shape="circle" には 3 つの座標 (center-x、center-y、radius) があります。shape="poly" にはポリゴンの形状を定義するポイントごとに 2 つの座標値 (x1、y1、x2、y2、x3、y3、...xN、yN) があります。 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).coords
|
href | NN すべて IE すべて HTML 3.2 |
href="URI" | 必要 |
領域に関係付けれているリンク先 URI。ブラウザでは、URI が HTML ドキュメントの場合、そのドキュメントは現在 (デフォルト) またはその他のウィンドウターゲット (target 属性に定義) に読み込まれます。その他のファイルタイプの場合、リンク先コンテンツがプラグインに読み込まれたり、リンク先ファイルがクライアントマシンに保存されたりします。IE 3 とバージョン 4 までの Navigator では area 要素を a 要素として扱うので、古い DOM のスクリプトが URL に関するさまざまなプロパティにアクセスしたり、onmouseover などのイベントハンドラーが機能したりするには、area 要素で href 属性を定義する必要があります。 |
|
例 | |
<AREA coords="20,30,120,70" href="contents.html" target="display"> |
|
値 | |
有効なすべての URI。絶対または相対 URL、同じページのアンカー (前に # 記号が付いたアンカー名)、およびスクリプト実行可能なブラウザでリンク先に移動するのではなくスクリプトステートメントを実行する javascript: 擬似 URL などがあります。 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
他のリンクオブジェクトプロパティを使用してプロトコルやホスト名などの URL のコンポーネントを抽出できます。第 9 章の Link オブジェクトを参照してください。 [window.]document.links[i].href
[window.]document.getElementById(elementID).href
|
lang | NN 3 IE 4 HTML 4 |
lang="languageCode" | オプション |
要素の属性値およびコンテンツに使用される言語。ブラウザはこの情報を使用して、合字 (特定のフォントでサポートされたり、書き言葉で必要になった場合)、疑問符、およびハイフネーションの処理などの詳細に関して、コンテンツの適切な表示を行います。その他のアプリケーションや検索エンジンでは、スペルチェック辞書の選択やインデックスの作成にこの情報を利用する場合があります。 |
|
例 | |
<SPAN lang="de">Deutsche Bundesbahn</SPAN> |
|
値 | |
大文字と小文字を区別しない言語コード |
|
既定値 | |
ブラウザの既定値 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).lang
|
nohref | NN すべて IE すべて HTML 3.2 |
nohref | オプション |
座標で定義された領域にリンクが関連付けられていない、つまり href 属性がないことをブラウザに指示します。この属性を設定すると、スクリプト実行可能なブラウザはこの要素をリンクとして扱わなくなります。area 要素に href 属性がない場合、この要素はユーザーイベントに応答しません。IE 4 以降および Netscape 6 では、対応する noHref プロパティを true または false に設定してスクリプトからこの属性を有効または無効にできます。 |
|
例 | |
<AREA coords="20,30,120,70" nohref> |
|
値 | |
この属性があると、属性値には true が設定されます。XHTML に厳密に準拠するには、nohref="nohref" を使用します。 |
|
既定値 | |
Off |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).noHref
|
shape | NN すべて IE すべて HTML 3.2 | |||||||||||||||||||||||||||
shape="shapeName" | オプション | |||||||||||||||||||||||||||
coords 属性に座標が指定されているクライアント側のイメージマップのリンク領域の形状を定義します。shape 属性は座標の数をブラウザに指示します。 |
||||||||||||||||||||||||||||
例 | ||||||||||||||||||||||||||||
<AREA shape="poly" coords="20,20,20,70,65,45" href="contents.html" target="display"> |
||||||||||||||||||||||||||||
値 | ||||||||||||||||||||||||||||
形状を表す大文字と小文字を区別しない定数値です。ブラウザの実装ごとに独自の形状名が定義されていますが、circle、rect、poly、および polygon はブラウザ間で共通です。
|
||||||||||||||||||||||||||||
既定値 | ||||||||||||||||||||||||||||
rect |
||||||||||||||||||||||||||||
オブジェクト参照 | ||||||||||||||||||||||||||||
[window.]document.getElementById(elementID).shape
|
target | NN すべて IE すべて HTML 3.2 |
target="windowOrFrameName" | オプション |
リンク先ドキュメントが現在のウィンドウやフレームとは異なるウィンドウやフレームに読み込まれる場合、target 属性にウィンドウ名やフレーム名を指定してリンク先ドキュメントを読み込む場所を指定できます。ターゲットフレーム名は識別子としてフレームとウィンドウに指定する必要があります。まず、frame 要素の name 属性および id 属性にフレームの名前を指定します。次に、window.open() スクリプトメソッドの 2 番目のパラメータに新規ウィンドウの名前を指定します。この属性を指定しないと、リンク先ドキュメントがリンク元のドキュメントを置き換えます。この属性は要素の href 属性に値が指定されているときにのみ適用されます。 area 要素には 1 つのリンク先ドキュメントと 1 つのターゲットのみを指定できます。リンクによって複数のフレームのコンテンツを変更するには、area 要素の onclick イベントハンドラーか javascript: 擬似 URL を使用して複数のドキュメントを読み込むスクリプトを実行します。このイベントハンドラーをサポートするブラウザのバージョンについては、第 9 章を参照してください。各フレームの location.href プロパティに目的の URL を設定します。 フレームおよびウィンドウは純粋なドキュメントマークアップの対象範囲外であるため、HTML 4 および XHTML の Strict DTD ではすべての要素の target 属性をサポートしていません。実際、フレームセットドキュメントは Strict DTD では妥当性が検証されません。HTML 4 および XHTML に別に Frameset DTD が定められているのはこのためです。ドキュメントはこのような Strict DTD で妥当性を検証する必要があり、同時にターゲットもサポートする場合は、ページが読み込まれた後でリンク、イメージマップ、およびフォームの target プロパティを設定するスクリプトを使用します。 |
|
例 | |
<AREA coords="20,30,120,70" href="contents.html" target="display"> <AREA coords="140,30,180,70" href="index.html" target="_top"> |
|
値 | |
フレーム名またはウィンドウ名がターゲット要素の name 属性および id 属性に指定されている場合の大文字と小文字を区別する識別子。次の 4 つのターゲット名が予約されており、定数値として使用されます。 |
|
既定値 | |
_self |
|
オブジェクト参照 | |
[window.]document.links[i].target
[window.]document.getElementById(elementID).target
|