カテゴリ:
一枚の画像に複数のリンクを設置する方法をご紹介。
通常一枚の画像に一つのリンクが普通ですが、この方法は一枚の画像に複数のリンクが設定可能です。


条件(環境):
 画像をWEBにアップロードしURLを発行。
 その画像に四角形のエリアで二カ所のリンク設定します。
 下記の画像で言うならばタンスの画像にそれぞれに設定しています。


例:








コチラのタグはこのようになっています。


<img src="●●●.png" width="520" height="270" border="1" usemap="#mapID" alt="" /><br />

<map name="mapID" id="mapID">
<area shape="rect" coords="15,22,180,210" href="http://www.tansu.com/●●●" title="ぼたん" />
<area shape="rect" coords="340,22,510,210" href="http://www.tansu.com●●●" title="喜楽" />
</map>


coords="15,22,180,210" この値が少々難解でしたので




サクッと簡単にお伝えします。



画像
png



起点は画像全体の左上の角です。
リンクを設置するエリアはタンスの画像なので、
測量ポイントはタンスの角

そこからpx単位で測量を行います。
上記の"画像"を参考に①,②,③,④のpxを測ります。(細かくある必要はない)



【title=ぼたん】
Wide① (横px)
High② (縦px)
Wide③ (横px)
High④ (縦px)


【title=喜楽】
Wide① (横px)
High② (縦px)
Wide③ (横px)
High④ (縦px)


あとはこちらに求めた数字を当てはめるだけです。  

coords="①,②,③,④"



補足:
アップロードした画像サイズは正確に!!
width="●●●" height="●●●"



【コピータグ用 ※黒丸を置き換えてご使用下さい】
<img src="●●●.png" width="●●●" height="●●●" border="1" usemap="#mapID" alt="" /><br />
<map name="mapID" id="mapID">
<area shape="rect" coords="●,●,●,●" href="http://www.●●●" title="●●●" />
<area shape="rect" coords="●,●,●,●" href="http://www.●●●" title="●●●" />
</map>



参考サイト
マップ - HTMLタグリファレンス/Tips