4.8.14.1 オーサリング

<p>
 形状を選択してください：
 <img src="shapes.png" usemap="#shapes"
      alt="赤色の穴あきボックス、緑色の円、青色の三角形、黄色の星の 4 つの形状が利用できます。">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- 赤色のボックスの穴 -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="赤色のボックス">
  <area shape=circle coords="200,75,50" href="green.html" alt="緑色の円">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="青色の三角形">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="黄色の星">
 </map>
</p>

4.8.14.2 処理モデル

イメージを表している img 要素または object 要素に usemap 属性が指定されたら、ユーザーエージェントは以下の通りに処理しなければいけません：

1. 最初に、map 要素へのハッシュ名前参照パースするルールに従わなければいけません。これは、要素（該当のmap 要素）または null のいずれかを返すでしょう。

2. それが null を返したら、この手順を中止します。そのイメージは、結局のところ、イメージマップと結びづけられません。

3. そうでなければ、ユーザーエージェントは、map の子孫である area 要素すべてを集めなければいけません。それらを areas とします。

イメージマップを形成する area 要素のリスト（areas）を取得したら、インタラクティブなユーザーエージェントは、2 つの方法のうちひとつでリストを処理しなければいけません。

ユーザーエージェントが、img 要素が表すテキストを見せることを想定しているなら、次の手順を使わなければいけません：

イメージをサポートしてない、または、イメージが無効にされているユーザーエージェントでは、object 要素はイメージを表すことはできません。ゆえに、これはこの節には一切当てはまりません（フォールバック・コンテンツが代わりに表示されます）。そのため、次の手順は img 要素にだけに当てはまります。

1. areas にある area 要素のうち、href 属性を持たないものすべてを削除します。

2. areas にある area 要素のうち、alt 属性を持たないもの、または、alt 属性の値が空文字のものすべてを削除します。ただし、areas の中に、href 属性の値が同じで alt 属性が空でない area 要素が別に存在する場合に限ります。

3. areas の中に残っている area 要素は、ハイパーリンクを表します。これらのハイパーリンクをすべて、img 要素のテキストと結びづけて、ユーザーが利用できるようにしなければいけません

   このコンテキストでは、ユーザーエージェントは、alt 属性が指定されていない、または、alt 属性が空文字列もしくは見えないテキストだったとしても、そのような area 要素や img 要素を表すことができます。ユーザーエージェント定義の方法で、ウェブ制作者から適切なテキストの提供がなかったことを示します。

ユーザーエージェントが、イメージを表示し、そのイメージからハイパーリンクを選択できるようにすることを想定するなら、そのイメージは、レイヤー化した図形と結びづけられなければいけません。この図形は areas の中にある area 要素から取り出され、順序はツリー順序と逆になります（map に最後に指定された area 要素は、最背面の図形となり、map の最初の要素は、ツリー順に、最前面の図形となります。）。

areas の中にあるそれぞれの area 要素は、次の通りに処理して、図形を取得し、イメージ上でレイヤー化しなければいけません：

1. 要素の shape 属性が表す状態を見つけます。

2. 該当要素にcoords 属性が存在すれば、 整数リスト・パース規則を使ってその要素の coords 属性をパースします。そして、その結果を coords リストとします。この属性が存在しなければ、coords リストを空リストとします。

3. もし coords リストにある項目の数が、下表の通り、area 要素の現在の状態に対して指定された最小数より少なければ、その図形は空ということになります。この手順を中止します。

   状態	最小項目数
   Circle 状態	3
   Default 状態	0
   Polygon 状態	6
   Rectangle 状態	4

4. shape 属性の状態に対応する次のリストのエントリの通り、coords リストにある超過項目をチェックします：

   Circle 状態

   リストから 3 つ目より後ろの項目をドロップします。

   Default 状態

   リストからすべての項目をドロップします。

   Polygon 状態

   項目の数が奇数なら、最後の項目をドロップします。

   Rectangle 状態

   リストから 4 つ目より後ろの項目をドロップします。

5. shape 属性が rectangle 状態 を表し、そのリストの最初の数字が、そのリストの 3 つ目の数字より数値ベースで小さいなら、それら 2 つの数字を入れ替えます。

6. shape 属性が rectangle 状態 を表し、そのリストの 2 つ目の数字が、そのリストの 4 つ目の数字より数値ベースで小さいなら、それら 2 つの数字を入れ替えます。

7. shape 属性が circle 状態 を表し、そのリストの 3 つ目の数字が 0 以下なら、その図形は空となります。この手順を中止します。

8. 今、図形は、shape 属性の状態に対応する以下のリストで説明されるエントリのいずれかとなります：

   Circle 状態

   x を coords の最初の数字とし、 y を 2 番目の数字とし、r を 3 番目の数字にします。

   その図形は、中心がイメージ左端から x CSS ピクセルで、イメージの上端から x CSS ピクセルとなり、半径は r ピクセルとなる円となります。

   Default 状態

   その図形は、イメージ全体をぴったりに覆う矩形となります。

   Polygon 状態

   x_i を、coords の (2i) 番目のエントリにし、y_i を、coords の (2i+1) 番目のエントリとします。（coords の最初のエントリを0番目と数えます）。

   coordinates を、イメージの左上から CSS ピクセルで計測した (x_i, y_i) とします。0 から (N/2)-1 のすべての整数値 i に対して適用します。N は coords の項目数です。

   その図形は、頂点が coordinates によって与えられた多角形となり、その内部は偶奇規則を使って定められます。 [GRAPHICS]

   Rectangle 状態

   x1 を、coords の最初の数位とし、y1 を2番目の数字とし、x2 を 3 番目の数字とし、 y2 を 4 番目の数字とします。

   その図形は、左上角が座標 (x1, y1) によって与えられ、右下角が座標 (x2, y2) によって与えられた矩形となります。これらの座標は、イメージの左上から CSS ピクセルで表されたものです。

   歴史的な理由のため、座標は表示されたイメージに相対したものとして解釈されなければいけません。たとえ、それが、CSS や、イメージの要素の width と height を使って、伸縮されたとしてもです。

上記のアルゴリズムによってレイヤー化された図形のセットと結びづけられたイメージ上でマウス・クリックがあれば、ポインティング・デバイスが指し示す位置（もしあれば）を覆う最前面の図形に送出されなければいけません。そして、そのイメージの要素自身に再び送出（新規の Event オブジェクトとともに）されなければいけません。ユーザーエージェントはまた、個々の area 要素が、選択やアクティブ化（例：キーボードを使って）のためのハイパーリンクを表すことができるようにすることができます。こらから発出されるイベントは、そのイメージに伝搬しません。

map 要素（そして、その area 要素）は複数の img 要素や object 要素と結びづけることができるため、area 要素は、ドキュメントのフォーカス可能な複数の領域に対応することが可能となります。

イメージマップはライブです。：もし DOM が変化したら、ユーザーエージェントは、あたかもそれがイメージマップのアルゴリズムを再び実行したかのように、動作しなければいけません。