图像贴图调整器，可用于居高临下的图像

编程问答 2022-06-08

问题描述

我正在使用David Bradshaw创建的图像地图调整程序包来尝试在HTML页面上制作美国地图，该地图突出显示状态时，整个状态会更改颜色（这是通过绝对定位来完成的每当将原件悬停在原件上时，状态上的另一幅彩色图像）。我的问题是，当我调整窗口大小时，图像映射的区域部分仍保持最初加载窗口时的位置。仅当我尝试显示的地图处于绝对位置时，才会发生这种情况。否则，它将正常工作。

这是非绝对定位的地图，用作用户单击以使状态更改颜色的内容：

          <area target="" alt="Mississippi" onmouseenter="state_hovered(document.querySelector('#ms-img'),document.querySelector('#Mississippi'))" title="Mississippi" id="Mississippi-bg" href="#map-loc" coords="858,478,851,430,862,412,872,408,927,406,930,521,915,519,907,891,506,846,510" shape="poly">
          <area target="" alt="Alabama" onmouseenter="state_hovered(document.querySelector('#al-img'),document.querySelector('#Alabama'))" title="Alabama" id="Alabama-bg" href="#map-loc" coords="947,504,935,497,931,503,929,403,987,400,1006,451,1012,459,479,1016,488,947,491" shape="poly">
          <area target="" alt="Georgia" onmouseenter="state_hovered(document.querySelector('#ge-img'),document.querySelector('#Georgia'))" title="Georgia" id="Georgia-bg" href="#map-loc" coords="1031,494,1022,470,1024,1014,436,998,1047,395,1072,409,1092,424,1114,440,1127,456,1120,473,1115,482,1090,1055,493" shape="poly">
          <area target="" alt="Florida" onmouseenter="state_hovered(document.querySelector('#fl-img'),document.querySelector('#Florida'))" title="Florida" id="Florida-bg" href="#map-loc" coords="961,500,1019,1037,502,1096,499,1125,1139,1156,545,1171,563,1181,579,1185,600,1182,607,1176,616,1148,598,1122,574,1111,553,1108,535,1069,509,1053,507,1029,516,1004,972,506" shape="poly">
          <area target="" alt="South Carolina" onmouseenter="state_hovered(document.querySelector('#sc-img'),document.querySelector('#South_Carolina'))" title="South Carolina" id="South Carolina-bg" href="#map-loc" coords="1104,418,1079,1066,397,391,1116,1147,393,1158,398,1170,410,422,1153,431,1135,439,437,1110,423,1089,411" shape="poly"></map>```

This is an example of one of the colored state images that will appear when a state is hovered:
```<img src="media/pictures/states_imgs/correct sized images/Georgia-img.png"   usemap="#georgia-overlay" id="ge-img" class="img-overlay">
        <map name="georgia-overlay" id="georgia-img-map" class='maps-overlay'>
          <area target="" class="area-overlay" alt="georgia" id="Georgia"  href="#map-loc" coords="995,1056,392,399,1068,1084,419,1130,453,1128,466,1119,485,1113,492,1105,1094,1028,499" shape="poly">
        </map>```

The problem is that when the window gets resized the image map of the image overlay does not scale,though the image map of the blank United States image does. My guess is that since the state overlay image is absolutely positioned the resizing doesn't work. How can I get around this?

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlimagemapresponsiveness