プロ級編１

　クリッカブルマップ
　　　マップからリンクを飛ばすにはクリッカブルマップだ。

文字やボタンでリンク先へ飛ばす技はマスター済みですね。もう１つ上のレベルとして、図形からリンクさせたいものです。
地図からリンクさせる技を見て頂きましょう。クリッカブルマップのサンプルをご覧下さい。
地域をクリックすると地域名が表示されましたね。これは図形の中に座標で指定した部分をリンク設定している訳です。 クリッカブルマップの主要なＨＴＭＬ文は下記の通りです。

<IMG SRC="map.gif" USEMAP="#map1">
<MAP NAME="map1">
<area shape="rect" coords="200,8 280,96" HREF="□□.html">
<area shape="rect" coords="200,100 240,176" HREF="△△.html">
<area shape="rect" coords="184,180 224,216" HREF="○○.html">
<area shape="poly" coords="216,120 136,176 144,228 196,224" HREF="◎◎.html">
<area shape="rect" coords="117,200 160,245" HREF="◇◇.html">
<area shape="poly" coords="116,200 50,210 85,260 115,270" HREF="▽▽.html">
<area shape="poly" coords="115,220 20,220 40,290 3,390 8,390 85,280" HREF="□〇.html">
<area shape="rect" coords="10,70 150,140" HREF="▽△.html">
<area shape="default" NOHREF>
</MAP>

細かい座標の数値は後述するとして、タグの並びとリンク先ＵＲＬの場所は覚えておいて下さい。 座標を上手に指定すれば、正方形や円形などの規則正しい図形以外のエリアをクリッカブル指定出来ます。 サンプル見本の地図（ map.gif ）に対する東北や関東など座標は上記の通りです。

少し解説すると、shape="rect" が四角（長方形）の座標で指定する宣言。 shape="poly" が三角形を含む多角形で、shape="circ" は円の座標だと宣言しています。
座標の点が多い□〇.htmlは九州ですね。地図が複雑だと座標点も多くなっちゃいます。
クリッカブルじゃないところは shape="default" NOHREF と書いて仕上げます。

さてさて、座標の数値を見つけ出すのは結構大変。画像ソフトを駆使して出来ない訳ではありませんが、ここは 便利なツールを活用したものです。フリーウェアに「ClientSideImageMapEditor」という優れモノがあります。 クリッカブルマップを使うプロ級には必須ツールと言えるでしょう。
　／　
是非ともマスターして行きましょう。
☆彡main point
・指定したエリアが重なった時は先に宣言してる方が優先です。
・この方法は地図や図鑑を利用したコンテンツなどに最適です。
・"rect"と"circ"の場合は座標を２点指定すれば出来ています。
・"poly"は多角形なので、座標指定は何個でも構いませんので。
質問メール　 SCHOOL MENU