Elementor 中的客户端图像映射答案

【问题标题】：Client-Side Image Map in ElementorElementor 中的客户端图像映射
【发布时间】：2020-10-29 00:19:56
【问题描述】：

我正在尝试在我客户网站的主页上实现客户端图像映射。我使用了免费的生成器并生成了这段代码，但是，地图只链接到第一个链接（美国西部位置）。代码如下：

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://crossdockameri.wpengine.com/wp-content/uploads/2020/07/CD-BREAKOUTMAP.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="Western U.S. Cross Dock Locations" title="Western U.S. Cross Dock Locations" href="https://crossdockameri.wpengine.com/western-us-cross-dock-locations" coords="269,38,136,581,94,936,123,1371,240,1701,261,1893,733,1943,1226,2014,1343,1943,1627,1918,1664,1504,1756,1463,1765,1099,1635,1045,1689,280" shape="poly">
    <area target="" alt="Midwest U.S. Cross Dock Locations" title="Midwest U.S. Cross Dock Locations" href="https://crossdockameri.wpengine.com/midwest-us-cross-dock-locations" coords="1877,150,1790,1095,1911,1153,1915,1496,1844,1517,1794,1968,1518,1968,1585,2106,1706,2286,1857,2315,1919,2269,2057,2457,2174,2624,2308,2645,2324,2486,2395,2390,2558,2294,2734,2277,2855,2315,3005,2319,2993,2169,2926,2064,2792,2077,2842,1914,2859,1759,2926,1609,3076,1550,3439,1504,3490,1404,3465,1320,3515,1229,3556,1095,3540,940,3377,786,3293,652,3226,539,2805,389,2826,163" shape="poly">
    <area target="" alt="Northeast U.S. Cross Dock Locations" title="Northeast U.S. Cross Dock Locations" href="https://crossdockameri.wpengine.com/northeast-us-cross-dock-locations" coords="3565,338,3544,560,3911,568,3832,648,3753,773,3774,986,3665,1178,3761,1316,3895,1208,3970,1103,4120,1153,4187,1220,4283,1091,4292,944,4388,832,4467,752,4567,648,4505,589,4509,472,4663,309,4601,226,4505,54,4312,259" shape="poly">
    <area target="" alt="Southeast U.S. Cross Dock Locations" title="Southeast U.S. Cross Dock Locations" href="https://crossdockameri.wpengine.com/southeast-us-cross-dock-locations" coords="3201,1663,3089,1910,3101,2064,3068,2194,3181,2223,3264,2307,3439,2290,3586,2298,3673,2328,3732,2273,3807,2374,3878,2532,3982,2662,4120,2704,4166,2566,4099,2407,4041,2294,4546,2257,4517,2018,4003,2023,4133,1864,4262,1738,4329,1575,4308,1417,4187,1300,4074,1245,3949,1341,3853,1492,3636,1567" shape="poly">
</map>

如果您转到该页面，地图的第二个外观就是与上述代码一起使用的那个。第一次出现是尝试通过设置单独的图像然后对图像进行绝对定位并链接到这些单独的图像来实现它，我真的不想这样做。

任何正确实施图像映射的帮助将不胜感激。

【问题讨论】：

标签： image dictionary elementor

【解决方案1】：

我发现了问题所在。需要正确缩放图像，然后在该缩放图像上勾勒出热点。所以html没有错！现在开始弄清楚如何创建响应式图像映射。

【讨论】：