クリッカブルマップ。(3)

今回は、画像の中に円形のエリアを作る方法です。

「ペイント」ソフトを使ってこのような画像を作ってみました。

画像のファイル名を「map_sample_circle01.jpg」としています。



ペイントソフトを使用した理由は前回と同様、

画像の左上の頂点を(0,0)としてエリアの中心の座標(x,y)を把握するためです。

また、今回は円の半径の長さが必要です。

中心の座標が(100,100)、半径50pxであることが分かれば円のエリアが決定します。



画像指定を次のようにします。

「usemap属性」でどのマップを使用するのかを指定します。

マップ名の前に#をつけます。

usemap 属性の値であるマップ名は <map> タグの name 属性で決定します。

自由に分かりやすい名前を付けます。

今回は「map_02」としておきましょう。

画像をアップロードしたら、付け加えて下さい。

<img src="//img01.i-ra.jp/usr/semipro/map_sample_circle01.jpg" alt="" usemap="#map_02">

<area> タグおよびその属性である shape 、coords を使って

マップの中のどの領域（エリア）をリンク元とするか、

さらに href 属性を使って、どのページにリンクするかを決めます。

今回は「クリッカブルマップ。(2)」の記事にリンクさせます。

<area> タグは <map> タグの中に記述します。

shape 属性は今回の円の場合、「circle」です。（「円」は英語でcircle）

coords 属性は中心の座標（x,y）、半径の長さ（r）を続けて記述します。

今回は中心の座標(100,100)、半径50pxなので「coords="100,100,50"」です。

マウスポインタを画像にあてた際に説明が出るようにtitle属性も入れておきましょう。

<img src="//img01.i-ra.jp/usr/semipro/map_sample_circle01.jpg" alt="" usemap="#map_02">
<map name="map_02">
<area shape="circle" coords="100,100,50" href="http://semipro.i-ra.jp/e638791.html" title="「クリッカブルマップ。(2)」" target="_blank">
</map>

これで画像の中の円形のエリアだけにリンクが張られた状態になります。