CGI RESCUE チャレンジＣＧＩ - クライアントサイドイメージマップ

イメージマップには、ポイント＆クリックのＷＷＷインターフェース方式のクリッカブルマップと呼ばれるものがポピュラーですが、座標や形状、呼出しＵＲＬなどの設定が大変面倒です。ここで解説するのはＨＴＭＬ3.0から導入されたもので、このページの上部に表示されているもののように、タグだけでイメージマップを実現させるものです。ですからＨＴＭＬ3.0が認識できるブラウザでないと機能しませんが、多く利用されているネスケ2.0以降（エクスプローラはどのバージョンからＨＴＭＬ3.0を導入しているかは不明）などで利用できるために、そんなに支障はない時代になっているでしょう。利用できないブラウザの為の書き方も説明します。この方式のイメージマップは、有名どころでは、Ｙａｈｏｏ！Ｊａｐａｎの上部のリンク画像にも使われています。

作り方

帯状のリンクバーを作ってみましょう。画像のサイズは 701*11だったとします。これは、幅（x軸）が701ピクセルで、高さ（y軸）が11ピクセルということです。その画像には適当なサイズで区切ってボタンのように使うこととします。ここで注意することは、サイズが701*11なら、座標は(0,0)から始まって(700*10)になることです。サイズは1から数えますが、座標は0から数えますので。


    (0,0)    (100,0)  (200,0)    (300,0)   (400,0)   (500,0)   (600,0)   (700,0)
      +---------+---------+---------+---------+---------+---------+---------+-----> x軸(WIDTH)
      |         |         |         |         |         |         |         |
      | 1.html  |    2    |    3    |    4    |    5    |    6    |    7    |
      |         |         |         |         |         |         |         |
      +---------+---------+---------+---------+---------+---------+---------+
      y軸(HEIGHT)
    (0,10)   (100,10)  (200,10)  (300,10)  (400,10)  (500,10)  (600,10)  (700,10)


    <A HREF="このイメージマップを認識しないブラウザに警告するためのページ" TARGET="_top">
    <IMG SRC="画像.gif" USEMAP="#領域設定マップ" BORDER=0 WIDTH=画像サイズの幅 HEIGHT=画像サイズの高さ ALT="画像の名称"></A>
    <MAP NAME="領域設定マップ">
    <AREA COORDS="左上x座標,左上y座標,右上x座標,右上y座標" HREF="リンク先" TARGET="_top">
    <AREA COORDS="すべてのエリア" NOHREF>
    </MAP>


    <A HREF="no_csim.html" TARGET="_top">
    <IMG SRC="画像.gif" USEMAP="#csmap" BORDER=0 WIDTH=701 HEIGHT=11 ALT="MenuBar"></A>
    <MAP NAME="csmap">
    <AREA COORDS="100,0,200,10" HREF="2.html" TARGET="_top">
    <AREA COORDS="200,0,300,10" HREF="3.html" TARGET="_top">
    <AREA COORDS="300,0,400,10" HREF="4.html" TARGET="_top">
    <AREA COORDS="400,0,500,10" HREF="5.html" TARGET="_top">
    <AREA COORDS="500,0,600,10" HREF="6.html" TARGET="_top">
    <AREA COORDS="0,0,700,10" NOHREF>
    </MAP>

この例では、2から6までのエリアはそれぞれリンクされ、それ以外のエリアは何も起きないようにしたものです。ここで注意するのは、先に指定した方が優先されるということです。もし間違って重なるエリアを作ってしまった場合、先に記述した方が有効になり、後から記述したエリアの中の重なった領域は、先に記述したエリアのリンク先になります。ですから、<AREA COORDS="0,0,700,10" NOHREF>を最初に書いてしまうと、すべての領域がNOHREF（何も変化しない）になってしまいます。

画像を表示しない/できない方の為にALT文を、クライアントサイドイメージマップが利用できないブラウザの方の為に<A HREF="no_csim.html" TARGET="_top"></A>をつけるようにしましょう。"no_csim.html"には、「あなたのブラウザではこの画像リンクを利用できません・・・」を書いておくか、リンク先自体をホームページにしておくなどしておきましょう。

この例ではエリア（セル）が横にずらっと並んでいますが、縦横に組み合わせてもＯＫです。要するにエリア指定したセルが対象になるからです。

ターゲット文は、フレームを使った場合などにウインドウを制御するものですから、通常のページなら必要はありません。ターゲット文の意味については、こちらをご覧ください。