Section 2 : イメージマップ(2)

 Section 1 ではクライアントサイドイメージマップの概要を解説した。ここでは座標の指定のしかたなどを細かく見ていこう。

COORDS 属性の指定方法

COORDS 属性の指定においては,画像中に左上を原点とする座標系を導入する。
図 2.1 [D]

 <AREA> の SHAPE 属性で rectcirclepoly が指定された場合には,その領域を COORDS 属性に指定しなければならない。このために,画像の左上を原点として,右を x 軸正の向き,下を y 軸正の向きにとる座標系を考える。たとえば 160×120 ピクセルの画像の左上は (0,0),右上は (159,0),左下は (0,119),右下は (159,119) になる。0 から数えるので,x および y の最大値は幅あるいは高さより 1 だけ小さくなる。

 COORDS 属性の値は複数の座標(長さ)をカンマで区切って与える。ピクセルまたは百分率で指定可能である。これから,個々の場合について COORDS 属性の指定方法を見てみよう。

■ SHAPE="rect" の場合

SHAPE="rect" では左上,右下の頂点の座標。
図 2.2 [D]

 SHAPE="rect" で長方形の領域を指定したときは,右図のように左上,右下の頂点の座標をそれぞれ (x1, y1),(x2, y2) とすると,

COORDS="x1,y1,x2,y2"

のように与える。

■ SHAPE="circle" の場合

SHAPE="circle" では中心の座標と半径。
図 2.3 [D]

 SHAPE="circle" で円の領域を指定したときは,右図のように中心の座標を (x, y),円の半径を r とすると,

COORDS="x,y,r"

となる。

■ SHAPE="poly" の場合

SHAPE="poly" では各頂点の座標。
図 2.4 [D]

 SHAPE="poly" で多角形の領域を指定すると,右図のように順に各頂点 (x1, y1),(x2, y2),……,(xn, yn) の座標すべてを与える。

COORDS="x1,y1,x2,y2, ... ,xn,yn"

 n 番めの頂点と 1 番めの頂点は自動的に結ばれる(1 番めの頂点の座標をリストの最後に書いても構わない)。多角形の場合のみ,与える点の数は一定しない。

領域指定の順序

 座標指定をしていると,2 つ以上の領域が重なってしまう部分が出てくるかもしれない。この場合,先に指定されたほうが優先である。

 たとえば,次の指定を見ていただきたい。

<AREA SHAPE="rect" COORDS="0,0,100,100" HREF="link1.htm" ALT="link1">
<AREA SHAPE="rect" COORDS="50,50,150,150" HREF="link2.htm" ALT="link2">

2 つ以上の領域が重なった場合,先に指定したほうが優先される。
図 2.5 [D]

 (50,50),(100,50),(100,100),(50,100) の 4 点からなる正方形の領域で前者と後者の指定が重なっているのがおわかりいただけるであろうか。この領域では,先に指定したほう,つまり“link1.htm”へのジャンプになる。

 この規則をうまく使えば,

<AREA SHAPE="circle" COORDS="100,100,30" NOHREF ALT="">
<AREA SHAPE="circle" COORDS="100,100,70" HREF="link2.htm" ALT="link2">

では先に指定した中心 (100,100),半径 30 の円の領域が,あとの同中心半径 70 の円からくりぬかれ,円環状の領域が“link2.htm”へのジャンプになる。同様に順序や NOHREF 属性をうまく使えば,複雑な形状も実現できるだろう。

 したがって,SHAPE="default" の指定がイメージマップ定義の先頭にあると,以降の指定の上に既定値の指定が覆い被さってしまうので,イメージマップの意味がなくなってしまう。結局,既定値の指定は定義のいちばん最後で行うことになる。また,前に指定した領域にすっぽり含まれてしまうような領域を後で指定するのも意味がない。

 XHTML では,NOHREF 属性は“nohref="nohref"”と属性名を省略せずに書かなくてはならないことを再度注意しておく。

<A> とイメージマップ

 <MAP> では,<A> を用いて領域を指定することもできる。<A> を使う場合は,領域を指定するだけでなく開始タグと終了タグに挟まれたテキストもリンクのホットスポットとして機能する。このことは,リンク先へ移る方法としてイメージマップ・テキストの 2 種類を提供することができるということであり,利用者にやさしい方法である。

 <A> も SHAPE,COORDS 属性をもち,その用法は <AREA> とまったく同じである。ALT 属性は,<A> でくくられた範囲がリンク文字列になるのだから必要ない。

 HTML 4.01 では,<AREA> および <A> を混在させて領域を指定することができる。いっぽう,HTML 4.0 ではそれはできない。したがって,HTML 4.0 において,<A> を用いて領域を指定するコンテキストにおいては,<AREA> における NOHREF 属性は <A> で HREF 属性を書かないことに相当する。

 イメージマップの定義として,次の 2 つは同等である。

<MAP NAME="map1">
  <AREA SHAPE="rect" COORDS="20,100,100,150" HREF="index.htm" ALT="Index">
  <AREA SHAPE="circle" COORDS="60,50,20" NOHREF ALT="">
  <AREA SHAPE="circle" COORDS="60,50,40" HREF="about.htm" ALT="About">
</MAP>

<MAP NAME="map1">
  <P>Navigation:
    <A SHAPE="rect" COORDS="20,100,100,150" HREF="index.htm">Index</A> |
    <A SHAPE="circle" COORDS="60,50,20"></A><A SHAPE="circle" COORDS="60,50,40" HREF="about.htm">About</A></P>
</MAP>

異なる点は,前者は表示されることはないが,後者はイメージマップを定義していると同時に通常の文書の一部として(<OBJECT> 内に書かない限り)表示されるということである。もちろん,<MAP> に書かれた <A> は表示された場合は有効で,文字列をクリックすればそれぞれの HREF 属性で指定された URI へジャンプする。