图像映射无法正常工作答案

【问题标题】：Image map not functioning correctly图像映射无法正常工作
【发布时间】：2019-07-12 17:37:19
【问题描述】：

为什么我的图像映射不起作用？无论我点击图片地图的哪个位置，都不会跳转到下一页？

<img id="maptreebg" alt="" src="/handheld/images/mainbody/body_interactive_image_default.png" usemap="#maptree" />
<map id="maptree"> 
    <area id="ar1" shape="poly" coords="3,390,13,381,66,371,113,351,172,313,193,290,217,273,242,259,297,238,344,222,394,213,461,206,521,202,588,205,638,208,694,221,751,249,800,289,835,340,852,397,849,435,815,494,781,526,767,543,728,566,670,586,614,593,521,597,467,590,386,585,309,565,276,554,253,542,228,537,174,503,113,464,76,438,36,416,6,398,4,394" alt="Love"  href="/handheld/terms.htm" />
    <area id="ar2" shape="poly" coords="1990,389,1967,376,1929,373,1879,351,1846,334,1814,308,1786,279,1705,243,1636,220,1549,210,1475,203,1399,204,1331,212,1267,232,1213,268,1179,303,1155,336,1138,390,1138,419,1153,462,1191,510,1226,545,1305,581,1368,593,1448,597,1540,587,1610,586,1674,566,1737,545,1775,530,1841,487,1913,440,1949,416,1968,414,1991,392" alt="Family"  href="/handheld/terms.htm" />
    <area id="ar3" shape="poly" coords="0,849,32,835,73,827,123,806,156,779,188,749,227,723,292,699,358,676,426,667,517,662,609,664,654,671,727,692,770,721,807,755,834,796,850,842,852,880,845,906,814,952,776,993,736,1017,689,1038,635,1051,573,1054,494,1053,435,1045,384,1043,328,1030,272,1013,256,1003,218,993,186,968,149,944,118,924,92,906,66,890,47,878,22,867" alt="Friend" href="/handheld/terms.htm" />
    <area id="ar4" shape="poly" coords="1987,848,1972,837,1919,826,1868,805,1812,760,1773,728,1668,684,1585,669,1492,661,1385,662,1301,675,1225,712,1178,760,1158,794,1137,853,1143,896,1180,959,1224,1000,1294,1039,1365,1050,1470,1055,1552,1045,1615,1040,1677,1023,1757,996,1815,963,1876,925,1924,890,1969,866,1991,848,1985,850" alt="Colleaque" href="/handheld/terms.htm" />
    <area id="ar5" shape="poly" coords="0,1305,16,1295,55,1290,109,1266,139,1253,172,1226,208,1193,253,1171,315,1145,388,1128,480,1117,582,1119,644,1124,701,1141,758,1168,808,1211,835,1257,853,1310,847,1359,796,1428,750,1468,713,1487,645,1509,556,1509,493,1509,432,1505,368,1497,317,1482,265,1467,231,1453,187,1429,73,1352,43,1335,21,1326,6,1312" alt="Business" href="/handheld/terms.htm" />
    <area id="ar6" shape="poly" coords="1987,1302,1960,1293,1914,1281,1865,1262,1815,1222,1777,1191,1692,1154,1614,1130,1520,1121,1409,1117,1331,1126,1280,1145,1216,1178,1177,1225,1159,1251,1140,1302,1138,1323,1145,1358,1174,1409,1222,1456,1263,1481,1330,1503,1373,1510,1463,1512,1539,1503,1606,1500,1667,1485,1707,1476,1732,1460,1771,1449,1827,1412,1909,1355,1980,1319" alt="Educator/Learner" href="/handheld/terms.htm" />
    <area id="ar7" shape="poly" coords="47,3567,995,3069,1952,3569,1839,3569,1839,3568,1772,3569" alt="Registration"  href="/handheld/terms.htm" />
</map>

【问题讨论】：

标签： html imagemap

【解决方案1】：

您使用错误的属性来识别<map>。试试name 而不是id。

name 属性为地图提供了一个名称，以便可以引用它。该属性必须存在并且必须具有非空值且不含空格字符。 name 属性的值不能与同一文档中另一个 map 元素的 name 属性的值不兼容。如果还指定了 id 属性，则两个属性必须具有相同的值。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map#Attributes

【讨论】：

Ayman：我使用 ID 而不是 Name 的原因是因为我试图使用 document.getElementById('maptree') 在我的 JaveScript 中定位地图对象。使用 Name 是否适用于 getElementById？
否，但您可以同时拥有id 和 name。没有错。或者，您可以使用getElementsByAttribute() 或querySelector() 来引用地图对象。
无论哪种方式，name 属性都不是可选的。您必须拥有它，<map> 元素才能工作。