トップページ | 利用規定
  クライアントサイドイメージマップ

(株)友林堂
(株)友林堂


イメージマップには、ポイント&クリックのWWWインターフェース方式のクリッカブルマップと呼ばれる ものがポピュラーですが、座標や形状、呼出しURLなどの設定が大変面倒です。ここで解説する のはHTML3.0から導入されたもので、このページの上部に表示されているもののように、 タグだけでイメージマップを実現させるものです。 ですからHTML3.0が認識できるブラウザでないと機能しませんが、多く利用されている ネスケ2.0以降(エクスプローラはどのバージョンからHTML3.0を導入しているかは不明) などで利用できるために、そんなに支障はない時代になっているでしょう。利用できないブラウザの 為の書き方も説明します。この方式のイメージマップは、有名どころでは、Yahoo!Japanの上部のリンク画像にも使われています。



作り方

帯状のリンクバーを作ってみましょう。画像のサイズは 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"には、「あなたのブラウザではこの画像リンクを利用できません・・・」を 書いておくか、リンク先自体をホームページにしておくなどしておきましょう。

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

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


Powered by CGI RESCUE(R)