前の Section でイメージマップの「設計図」を作る方法を紹介した。ここでは，絵にそれを重ねてみる。実際のふるまいを確認しよう。
イメージマップの設計図ができたところで，これを画像に重ねなくては働かない。これは，<IMG> に次のような属性を加えて指定する。
| USEMAP="..." |
USEMAP 属性の値は，<MAP> でつけた設計図の名前（NAME 属性）である。この指定の方法は <A HREF="..."> と同じで，文書内の「名前」に関しては頭に "#" をつけて指定する。
それでは，イメージマップを作ってみよう。
| <MAP NAME="mapsamp"> <AREA SHAPE="rect" COORDS="30,20,70,50" HREF="index.html" ALT="Index"> <AREA SHAPE="circle" COORDS="100,70,20" HREF="mah01.htm" ALT="Section 1"> <AREA SHAPE="poly" COORDS="120,20,160,20,140,60" HREF="mah02.htm" ALT="Section 2"> </MAP> イメージマップのサンプルです。<BR> <IMG SRC="imgmap.gif" WIDTH=200 HEIGHT=100 ALT="Image map sample" USEMAP="#mapsamp"> |
それぞれの <AREA> の意味するところは，順に，
となっている。<AREA> タグで指定された領域からそれぞれジャンプできることを確かめてみよう。
|
イメージマップのサンプルです。 |
ところで，<AREA> で同じ部分を２度以上指定したらどうなるのだろうか。この場合は，先に書いた方が優先される。したがって，絵全体をジャンプの対象として，そこに島状に別のジャンプをおく場合は，「絵全体にかかるジャンプ」は <MAP>〜</MAP> で最後に指定することになる。
また，<AREA> の NOHREF 属性を使って一部分だけくりぬくことも可能である。
ちなみに，HTML 3.2 の規格書においては，「イメージマップの設計図」は同じファイルになくてもよい（外部から呼び出されるのでも構わない）となっているが，これが広く通用するかははなはだ疑問である。
実際問題として，イメージマップはご覧のとおり煩雑なので，あまり使った例は見受けられない。また，絵が表示されてこその性質もあることを忘れてはならない。
さらに，イメージマップにはどうしてもサイズの大きい画像が必要になることが多いので，トップページをこれで飾るとすれば相手は少なからず待たされるだろう。このあたりも考えどころではある。
実用上では，１枚の画像を長方形状に細分化し，<TABLE> を使ってそれらを並べ，絵の分割された部分全体を <A HREF="..."> でジャンプの対象にするという手法で擬似的にイメージマップを実現する方法も見られ，実際これで事足りることも多い。この手法については次の Section で解説する。
