area,mapタグ(クリッカブルマップ)

超初心者でも簡単にできるホームページ作成HTML基礎講座 EasyStudyHTML-TOP

クリッカブルマップ areaタグ mapタグ

一つの画像の任意の場所、複数のリンクを貼る場合に有効



area、mapタグ:クリッカブルマップを指定 clear.gif
【解説】
クリッカブルマップとは、1つの画像に対して複数のリンクを指定したい場合、または1つの画像の一部分にリンクを指定する場合に使用します。
<img>タグのusemap属性を<map>タグのname属性で指定した名前と同じにします。
<map>タグで画像内のある部分を何処にリンクさせるか指定します。
<img src="(1)" usemap="#(2)"</a>
<map name="(2)">
<area shape="(3)" coords="(4)" href="(5)">
・・・リンクの数だけ繰り返す
</map>
(1)画像のURL
(2)マップ名
(3)形状(default:画像全体、rect:四角形、circle:正円、poly:多角形)
(4)座標値((3)の形状により指定値が異なる)
 default:なし
 rect:X1,Y1,X2,Y2(半角カンマで区切って指定)
 circle:中心X,中心Y,半径(半角カンマで区切って指定)
 poly:X1,Y1,・・・Xn,Yn(半角カンマで区切って偶数個指定)
(5)リンク先URLまたはリンク先のファイル
サンプルソ−ス
<img src="
area_sample.gif" usemap="#sam">
<map name="sam">
<area shape="rect" coords="75,30,105,65" href="../index.html">
</map>

area_sample.gif の画像を座標値(75,30,105,65)四角形をクリックしたらhrefで指定したパスへ移動します。
※サンプル表示ではちょうど画像の a の部分がリンクになるように座標値を指定しています。
pcリストマークサンプル表示

↑ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora