 |
ホームページ作成 HTML基礎講座 areaタグ mapタグ
ホームページ作成・HTML基礎・スタイルシート（CSS)・javascript・SEO対策
|
|
| ■area、mapタグ：クリッカブルマップを指定 |
 |
|
【解説】
クリッカブルマップとは、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）画像のＵＲＬ
（2）マップ名
（3）形状（default：画像全体、rect：四角形、circle：正円、poly：多角形）
（4）座標値（（3）の形状により指定値が異なる）
default：なし
rect：X1,Y1,X2,Y2（半角カンマで区切って指定）
circle：中心X,中心Y,半径（半角カンマで区切って指定）
poly：X1,Y1,・・・Xn,Yn（半角カンマで区切って偶数個指定）
（5）リンク先ＵＲＬまたはリンク先のファイル |
サンプルソ−ス
<img src="area_sample.gif" usemap="#sam">
<map name="sam">
<area shape="rect" coords="100,30,135,65" href="../index.html">
</map>
area_sample.gif の画像を座標値（100,30,135,65）四角形をクリックしたらhrefで指定したパスへ移動します。
※サンプル表示ではちょうど画像の a の部分がリンクになるように座標値を指定しています。 |
 サンプル表示 |
|
|
|
↑ページトップへ |
|