クリッカブルマップ
クリッカブルマップとはクリックする領域によって異なるリンク先を表示するイメージのことで
一つのイメージに複数のリンク先を指定できる。
例えば日本地図で都道府県の場所をクリックすると各都道府県毎にリンクする。
<p> <img src="ファイルのパス" usemap="#マップ名"> <map name="マップ名"> <area shape="形状" coords="座標" href="リンク先のファイルのパス" alt="代替文字"> </map> </p>
<img src="ファイルのパス" usemap="#マップ名">
イメージにクリッカブルマップを関連付ける
#に続けて参照するクリッカブルマップの名前を指定する
<map name="マップ名"> </map>
クリッカブルマップを作成する。mapは単独では使わずname属性とセットで使う。
name属性にはクリッカブルマップの名前を指定する。map要素はimg要素のすぐ後ろに記述する
<area shape="形状" coords="座標" href="リンク先のファイルのパス" alt="代替文字">
クリッカブルマップのリンクの詳細を記述する。
shape属性にはリンク領域の形状をを指定する
coords属性にはリンクの領域の座標を指定する
指定方法 | 説明 |
---|---|
shape="rect" coords="a,b,c,d" | 長方形の領域にリンクを指定する。 左上のX座標,左上のY座標,右下のX座標,右下のY座標の順番で指定する |
shape="circle" coods="a,b,c" | 円の領域にリンクを指定する。中心のX座標,中心のY座標,半径の順で指定する |
shape="poly" coords="a,b,c,d,...." | 多角形の領域にリンクを指定する。全ての角の座標をX座標,Y座標の順に指定する |