クリッカブルマップを使う


クリッカブルマップとは、
要するに、click able map （クリックできるマップ）です。

またの名をイメージマップといいます。


クリッカブルマップを用いることで
画像の中に複数のリンクを作ることができます。

どんなものができあがるのか実際に作ってみます。
以下の画像の泡をクリックしてみてください。




ソースは以下のようになっています。

<img src="img/awa.png" border="0" usemap="#awa.png">
<map name="awa.png">
<area shape="circle" coords="120,30,19" href="http://sennbei.mond.jp/HP/" target="_blank">
<area shape="circle" coords="34,49,12" href="http://sennbei.mond.jp/" target="_blank">
<area shape="rect" coords="75,52,97,74" href="http://www1.bbs.livedoor.com/3009007/bbs_tree" target="_blank">
<area shape="poly" coords="112,83,140,65,143,108,129,113,106,106," href="http://px.a8.net/svt/ejp?a8mat=OH0YT+EV8PMA+348+5Z6WY" target="_blank">
<area shape="circle" coords="25,116,15" href="http://www.google.com/intl/ja/" target="_blank">
<area shape="circle" coords="99,138,11" href="menu.html" target="_self">
</map>


これではわかりにくいので、
より一般化した形でまとめておきます。


<img src="画像を指定" usemap="#画像の名前">
<map name="画像の名前">
<area shape="----" coords="座標" href="リンク先のアドレス" alt="説明文">
<area shape="----" coords="座標" href="リンク先のアドレス" alt="説明文">
<area shape="----" coords="座標" href="リンク先のアドレス" alt="説明文">
<area shape="----" coords="座標" href="リンク先のアドレス" alt="説明文">
</map>


リンクの形

shape="circle"	円形のリンクを作ります
shape="rect"	長方形のリンクを作ります
shape="poly"	多角形のリンクを作ります

座標の指定方法

円形の場合	coords="円の中心のx座標,円の中心のy座標,円の半径の大きさ"
長方形の場合	coords="左上のx座標,左上のy座標,右下のx座標,右下のy座標"
多角形の場合	coords="角1のx座標,角1のy座標,角2のx座標,角2のy座標,角3のx座標,角3のy座標,・・・・"

ターゲットの指定

target="_blank"	フレームを無視して、親ページに開く
target="_parent"	新しいウィンドウで開く
target="_self"	現在のフレームにページを開く
target="特定のフレームの名前"	特定の名前をつけたフレームにページを開く

また、<area shape="----" coords="座標" nohref>
とすることで、その部分のリンクを消すことができます。


クリッカブルマップは複雑ですので、
わからなくても、あまり気にしないでくださいね。



次は　特殊な文字を使う　です。

メニューに戻ります。