要更改悬停区域上的图像源

Want to change image source on area hover

本文关键字:图像 区域 悬停      更新时间:2023-09-26

当悬停在地图的任何区域时,都希望加载不同的图像。

<img src="images/mapimg.png" usemap="#states" />
<map name="states">
  <area shape="poly" coords="4,349,121,416,111,205" title="test1">
  <area shape="poly" coords="226,287,234,255,132,231,129,402,151,404,150,429,362,465,362,385,283,359" title="test" />
</map>

有很大的改进空间,但基本上与一样

 <img id="map" src="images/mapimg.png" usemap="#states" />
 <map name="states">
     <area style="background-color: black;" onmouseover="document.getElementById('map').src = 'other.png';" shape="poly" coords="4,349,121,416,111,205" title="test1">
     <area shape="poly" coords="226,287,234,255,132,231,129,402,151,404,150,429,362,465,362,385,283,359" title="test" />
 </map>