画像上任意の位置に画像とリンク

覚書

  1. <!-- 日本地図上の任意の位置に画像を挿入 -->
  2. <div style="text-align:center;">
  3. <div style="display:block; position:relative; width:580px; height:550px; margin-left:auto; margin-right:auto;">
  4. <!-- 日本地図画像 イメージ挿入、リンク共通 -->
  5. <img src="イメージ.gif" alt="リンク先説明" title="" usemap="#map" style="border:none;">
  6. <!-- 日本地図上の画像位置 -->
  7. <img src="イメージ.gif" name="if1" width="120" height="95" frameborder="0" scrolling="auto" allowtransparency="true" style="position:absolute; left:240px; top:23px;">
  8. <img src="イメージ.gif" name="if2" width="120" height="95" frameborder="0" scrolling="auto" allowtransparency="true" style="position:absolute; left:415px; top:280px;">
  9. <img src="イメージ.gif" name="if3" width="120" height="95" frameborder="0" scrolling="auto" allowtransparency="true" style="position:absolute; left:290px; top:390px;">
  10. <img src="イメージ.gif" name="if4" width="120" height="95" frameborder="0" scrolling="auto" allowtransparency="true" style="position:absolute; left:35px; top:260px;">
  11. <img src="イメージ.gif" name="if5" width="120" height="95" frameborder="0" scrolling="auto" allowtransparency="true" style="position:absolute; left:160px; top:450px;">
  12. </div><!-- text-align end -->
  13. </div><!-- display end -->

  15. <!-- 日本地図上県名にリンクを挿入 -->
  16. <map name="map">
    <area shape="circle" coords="410, 116, 29" href="http://リンク先" target="_blank" alt="リンク先説明" target="if1">
  17. <area shape="circle" coords="347, 346, 15" href="http://リンク先" target="_blank" alt="リンク先説明" target="if2">
  18. <area shape="circle" coords="260, 383, 15" href="http://リンク先" target="_blank" alt="リンク先説明" target="if3">
  19. <area shape="circle" coords="162, 377, 15" href="http://リンク先" target="_blank" alt="リンク先説明" target="if4">
  20. <area shape="circle" coords="160, 438, 15" href="http://リンク先" target="_blank" alt="リンク先説明" target="if5">
  21. </map>