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

 イメージマップの作り方がわかったところで,それを実際に利用する方法を見てみよう。

画像と定義の重ね合わせ

 <MAP> を使ってイメージマップの設計図ができたとしよう。そうしたら,その設計図を画像に重ね,イメージマップとして動作させる。このとき用いるのが USEMAP 属性である

USEMAP 属性
属性 解説
USEMAP 文字列 その画像と結びつけるイメージマップの設計図。<MAP> の NAME 属性の値で参照する。

 USEMAP 属性の与え方は <A NAME="..."> へのジャンプのように,名前の先頭にハッシュ記号「#」を冠する。同一のファイルにない <MAP> の定義も参照できることになっているが,UA がほとんど対応していないのが現状である。

 この USEMAP 属性は <IMG> が持っているというのはもちろん,<OBJECT> で画像を貼り込むときにも指定できる。

 イメージマップの例をお目にかけよう。

<P>
  <MAP NAME="map01">
    <AREA SHAPE="poly" COORDS="6,30,40,10,40,50" HREF="awht02.htm" ALT="Prev.">
    <AREA SHAPE="poly" COORDS="155,10,155,50,189,30" HREF="awht04.htm" ALT="Next">
    <AREA SHAPE="circle" COORDS="58,30,10" HREF="#a-USEMAP" ALT="Up">
    <AREA SHAPE="circle" COORDS="136,30,10" HREF="#c-imgmap_obj" ALT="Down">
    <AREA SHAPE="rect" COORDS="77,20,116,38" HREF="./" ALT="Index">
  </MAP>
  <IMG SRC="f_imgmap.gif" ALT="Navigation" WIDTH="200" HEIGHT="60" USEMAP="#map01">
</P>

Prev. Next Up Down Index Navigation

 実際,イメージマップを作るときはお絵かきソフトなどで画像の座標を確認しながらということになるだろうが,画像から簡単な指定でイメージマップの設計図を吐き出すアプリケーションもあるのでそれを利用するのも一法である。

 また,やや技術的な話になるが,イメージマップの領域はやたら正確に作ってもあまり意味がない。ポインティングデバイスをピクセル単位でちまちま動かさないこともあるし,だいいち座標の指定が大変である。たとえば,星形の領域を指定したいと思うのならその領域を含むような円や長方形を指定してしまったほうが簡単で済むし,往々にして操作も楽になる。

 <MAP> がブロック要素を内容として含む場合,または <AREA> とブロック要素が混在する場合も同様にすればよい。

イメージマップと <OBJECT>

 <MAP><OBJECT> の中に書かれたときでも,イメージマップの指定は有効である。すなわち,どんな状況でも参照することができる。このことを利用すると,グラフィカルな UA ならイメージマップ,ノングラフィカルな UA ならテキストで処理をすることができる。

<P>
  <OBJECT TYPE="image/gif" DATA="f_imgmap.gif" WIDTH="200" HEIGHT="60" USEMAP="#map02">
    <MAP NAME="map02">
      <P>Navigation:
        <A HREF="awht04.htm" SHAPE="poly" COORDS="155,10,155,50,189,30">Next</A> |
        <A HREF="awht02.htm" SHAPE="poly" COORDS="6,30,40,10,40,50">Previous</A> |
        <A HREF="#c-imgmap_obj" SHAPE="circle" COORDS="58,30,10">Up</A> |
        <A HREF="#c-ss_imgmap" SHAPE="circle" COORDS="136,30,10">Down</A> |
        <A HREF="./" SHAPE="rect" COORDS="77,20,116,38">Index</A></P>
    </MAP>
  </OBJECT>
</P>

 上の場合,画像が表示されると“map02”のイメージマップの指定部分が参照され,イメージマップになる(テキストは表示されない)が,画像が表示されないと,かわりに <OBJECT> 内が表示されるため,テキストによるナビゲーションが表示される。

サーバサイドイメージマップ

 最後に,サーバサイドイメージマップについて簡単に触れておこう。サーバサイドイメージマップを指定するためにはサーバ側の処理が必要で(本稿では述べない),HTML では対象となる画像を指定している <IMG> に対してまず <A> でリンクを張る。HREF 属性に与えるのはクリックされた位置が渡されるハンドラの URI である。<IMG> には ISMAP 属性 を指定し,それがサーバサイドイメージマップだと宣言しておく。

ISMAP 属性
属性 解説
ISMAP ブール値 リンクを張られた <IMG> が,サーバサイドイメージマップであることを宣言する。

 画像をクリックすると,<A> で指定した URI にジャンプし,クリックされた位置を渡す。

<P><A HREF="../cgi-bin/imagemap"><IMG SRC="navi.gif" ALT="Navigation" HEIGHT="240" HEIGHT="80" ISMAP></A></P>

 上の例では,“navi.gif”をクリックすると URI“../cgi-bin/imagemap”にその位置を渡す。