９

　行くぞ中級技-１
　　　クリッカブルマップってなんだ。

『答え』　画像上をクリックしてリンクさせる技。　簡単ですよ。

イメージマップとも言います。
座標の点で指定した部分をクリックするとリンク先にジャンプ出来ます。

<IMG SRC="abcmap.gif" USEMAP="#map1">
<MAP NAME="map1">
<area shape="rect" coords="100,100 150,150" HREF="□□.html">
<area shape="poly" coords="10,20 50,50 100,20" HREF="△△.html">
<area shape="circle" coords="200,200 200,150" HREF="○○.html">
<area shape="default" NOHREF>
</MAP>

これがHTML文です。これで四角／多角形／丸すべてのクリッカブル指定が可能なんです。（□□.htmlや△△.htmlは何か適当に御用意下さいね）
おうおう、意外に簡単だあ。（ねっ！？）
<map>と</map>で囲んで書き込みしまーす。（見りゃわかるか）
サンプルのmap1ってのがマップデータ名です。自由に名付けてね。
shape="rect" が四角（長方形）を規定するぞの意思表示。
shape="poly" が多角形（この場合は三角形）で、shape="circ" は円。
coords="100,100 150,150" と座標を指定してHREF=にジャ〜〜ンプ。
クリッカブルじゃないところは shape="default" NOHREF と書いて万全。
●サンプル●
さてさて、座標の数値を早く見つけたい方は便利なツールを使いましょう。フリーウェアで公開されています。
--- ClientSideImageMapEditor ---
☆彡main point
　指定したエリアが重なった時は先に宣言してる方が優先です。
　この方法は地図や図鑑を利用したコンテンツなどに最適です。
　リンクのないところはshape="default" NOHREFがマナーです。

　"rect"と"circ"の場合は座標を２点指定すれば出来ています。
　"poly"は多角形なので、座標指定は何個でも構いませんので。
　マップデータ名（サンプルでは map1）の一致をチェックのこと。
質問メール　 ＯＺ道場メニュー
>