擬似イメージマップのデモ用htmlの説明

表示用画像をid=”map_img1″ 、領域用画像をid=”map_img2″ として、表示用画像をクリックされた時にmap_link()をaddEventListenerで呼び出すだけです。
<head>
<meta name="viewport" content="width=device-width">
<script src="./link_map.js"></script>
<script>
link_map = [
// R G B 文字列
221, 235, 247, "ベローナ ",
189, 215, 238, "ベネチア ",
:
:
117, 113, 113, "ナポリ ",
-1 ];
</script>
</head>
<body>
<img style="width: 70%; height: auto;" src="./italy-map1.jpg" id="map_img1"/>
<script type="text/javascript">
  document.getElementById( "map_img1" ).addEventListener( "click", function( event ) { 
  map_link(this.getBoundingClientRect() ); // イメージマップリンク
}) ;
</script>
<br>
<!-- 色を取得用のmap_img2を隠して表示 -->
<img src="./italy-map2.jpg" id="map_img2" width=1 height=1>
<p>

サイトマップに戻る  次ページ・擬似イメージマップjavascript map_link.jsの説明