Jun. 23rd,2015
＃
＃
＃
座標の指定方法
“shape”属性の値に“rect”を指定する場合
イメージマップの領域は長方形になります。“coords”属性の値はイメージマップの領域の領域の左上の角の座標と右下の角の座標を指定します。
coords="{左上の角のX座標},{左上の角のY座標},{右下の角のX座標},{右下の角のY座標}"
“shape”属性の値に“circle”を指定する場合
イメージマップの領域は円形になります。“coords”属性の値はイメージマップの領域の中心点の座標と半径の長さのピクセル数を指定します。
coords="{円の中心のX座標},{円の中心のY座標}"
“shape”属性の値に“poly”を指定する場合
イメージマップの領域は多角形になります。“coords”属性の値はすべての角の座標を順番に記述して指定します。
coords="{1つ目の角のX座標},{1つ目の角のY座標},{2つ目の角のX座標},{2つ目の角のY座標},{3つ目の角のX座標},{3つ目の角のY座標},..."
“shape”属性の値に“default”を指定する場合
画像全体がイメージマップの領域になります。“coords”属性は指定できません。他に領域を指定している“area”要素がある場合はその領域以外の部分がイメージマップの領域になります。
＃
サンプルコード
<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample4">
<map name="sample4">
<area href="sample1.html" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample2.html" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample3.html" shape="circle" coords="146,59,47" alt="円形">
<area href="sample4.html" shape="default" alt="全体">
</map>
