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

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください