1枚の画像に複数のリンクを貼る方法

   2015/04/28

1枚の画像の複数箇所に、それぞれ違うリンクを設定した場合の設定方法です。

<IMG src="img/i0501a.gif" width="400" height="250" border="1" usemap="#mapID">
<MAP name="mapID">
<AREA shape="rect" coords="259,15,288,69" href="sample1.html" title="コンビニ">
<AREA shape="rect" coords="225,192,288,223" href="sample2.html" title="電器屋">
<AREA shape="circle" coords="59,101,26" href="sample3.html" title="山">
<AREA shape="poly" coords="40,183,124,152,124,183" href="sample4.html" title="GS">
</MAP>

AREAタグはいくつでも指定することができます。
shapeはリンクの形を表し、coordsには次のように設定します。

rect
四角形の左上のx座標, y座標, 四角形の右下のx座標, y座標

circle
円の中心のx座標, y座標, 円の半径

poly
多角形のすべての点のx座標, y座標を交互に記述

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す