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

<script>
function changeMapImage(imgPath) {
  document.getElementById('map1').src = imgPath;
}
</script>

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

<script>
function changeMapImage(imgPath) {
  document.getElementById('map1').src = imgPath;
  document.getElementById('map2').src = imgPath;
}
</script>

<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>