クリッカブルマップのマウスオーバー

javascript
1
2
3
4
5
<script>
function changeMapImage(imgPath) {
  document.getElementById('map1').src = imgPath;
}
</script>

レスポンシブとかで複数ある場合

1
2
3
4
5
6
<script>
function changeMapImage(imgPath) {
  document.getElementById('map1').src = imgPath;
  document.getElementById('map2').src = imgPath;
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<section class="map">
  <img id="map" src="001.png" border="0" width="600" height="600" usemap="#map">
  <map name="map">
 
    <area shape="rect" coords="212,35,388,125" href="contents/"
    onmouseover="changeMapImage('101.png')"
    onmouseout="changeMapImage('000.png')">
 
    <area shape="rect" coords="12,241,119,362" href="event/"
    onmouseover="changeMapImage('102.png')"
    onmouseout="changeMapImage('000.png')">
</map>
</section>

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

▲