自習１１（クリッカブルマップ） −−−−−−−−−−−−−−−−−−−−−−−−−−−−−
クリッカブルマップは画像の特定領域をクリックするとジャンプ する機能です。<map>タグを利用する。 １. 画像ファイル の準備 japan.gifを用いて説明する。 （注）japan.gif の保存方法 ・japan.gifをＩＥで表示させる。 （例）http://kakuda.zive.net/html/img/japan.gif ・ファイル：名前をつけて保存
japan.gif を./img/japan.gifとして保存する。フォルダ の名称に注意。他のファイルの保存がが~/html/の場合、~/html /img/を作って 下さい。 ２．画像の特定領域の座標を調べる。 ペイントで japan.gif を読み込む。ステータスバーを表示させるよう設定。 ツールボックス右上の「選択」ツールを選び、カーソルを左上の隅に移動すると、 ステータスバーの右下に 0,0と 表示される。これがカーソルの (x,y) 座標です。 次に画像の右下にカーソルを移動すると、座標は 199,199 です。 また、Tokyo の文字の左側の小さな点の位置は 112,108。 （注）座標が特殊でY軸は下方向がプラスなのでご注意下さい。 ３．最初のファイルを準備する。 <!-- click.html --> <html> クリッカブルマップの練習です。<br> <img src="./img/japan.gif" usemap="#click"> <map name=click> <area coords="113,108,10" shape="circle" href="tokyo.html"> <area coords="0,137,30,190" href="kyushu.html"> </map> <br> Tokyoの左の赤点をクリックすると・・・<br> 九州の位置をクリックすると・・・ </html> ４．ジャンプ先のファイル２ヶを用意する。 <!-- tokyo.html --> <html> <h1>ここは東京</h1> <a href="click.html">戻る</a> </html> <!-- kyushu.html --> <html> <h1>ここは九州</h1> <a href="click.html">戻る</a> </html> ５．動作確認 ブラウザでclick.html を開くと日本地図が表示される。 Tokyo の赤点にポインタを移動すると手の形になる。クリックすると ジャンプする。 ６．参考 詳しくは、 http://www.tagindex.com/html_tag/img/img_map.html なお、 <area shape="default" nohref> はIEでは動作しません！ （お断り）今回は説明を簡単にしました。