イメージマップ

4.7.13 イメージマップ

4.7.13.1 オーサリング

イメージマップは、イメージ上の幾何学的な領域をハイパーリンクと結びづけることができます。

イメージは、イメージを表す img 要素または object 要素の形式を取りますが、img 要素または object 要素の usemap 属性を指定することによって、(map 要素の形式を取った)イメージマップと結びづけられることができます。usemap 属性は、指定されれば、map 要素への妥当なハッシュ名前参照でなければいけません。

次のように見えるイメージを考えてみましょう:

A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

着色された領域だけをクリッカブルにしたい場合は、次のようにします:

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="4 つの形状が利用できます: 赤色の空洞四角形, 緑色の円, 青色の三角形, 黄色の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.7.13.2 処理モデル

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

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

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

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

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

ユーザーエージェントが、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 リストを空リストとします。

  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 状態

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

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

    Default 状態

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

    Polygon 状態

    xi を、coords の (2i) 番目のエントリとし、yi を、coords の (2i+1) 番目のエントリとします。(coords の最初のエントリを 0 番目と数えます)。

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

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

    Rectangle 状態

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

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

    歴史的な理由のため、座標は、CSS の 'width' と 'height' プロパティ(非 CSS ブラウザーでは、画像の要素の widthheight 属性。CSS ブラウザーは、これらの属性を、前述の CSS プロパティに対応付けます。)を使って伸縮されたあとに、表示されているイメージに相対したものとして解釈されなければいけません。

    ブラウザーのズーム機能や、CSS や SVG を使って適用される変形は、この座標に影響を及ぼしません。

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

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

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


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#image-maps