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

WEBデザイン

2013.01.152019.09.25

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

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

AREAタグはいくつでも指定することができます。

shapeはリンクの形を表し、coordsには次のように設定します。
rect

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

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

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