Question

当我点击第一个区域的链接时，我希望图像270orange.png处于活动状态。我不确定这是否可以实现，但请帮助我。

img id="Image-Maps_9200905221105171"
  src="270vob.png" usemap="#Image-Maps_9200905221105171" border="0" 
  width="270" height="270" alt=""

map id="_Image-Maps_9200905221105171" name="Image-Maps_9200905221105171"

area shape="poly" coords="134, 43, 211, 178, 219, 177, 231, 174, 243, 169, 254, 159, 263, 144, 267, 128, 267, 113, 263, 95, 257, 79, 249, 65, 237, 48, 224, 35, 207, 22, 185, 11, 168, 6, 148, 2, 128, 2, 111, 4, 92, 9, 78, 14, 69, 19, 82, 17, 95, 16, 108, 19, 119, 25, 129, 35"
  href="#" alt="Identity" title="Identity"
  onMouseOver="if(document.images) document.getElementById('Image-Maps_9200905221105171').src= '270orange.png';"
  onMouseOut="if(document.images) document.getElementById('Image-Maps_9200905221105171').src= '270vob.png';"/

area shape="poly" coords="57, 177, 52, 189, 49, 203, 49, 214, 51, 224, 57, 235, 63, 245, 67, 250, 54, 242, 43, 231, 29, 216, 19, 200, 9, 179, 3, 155, 2, 133, 4, 111, 9, 91, 17, 72, 29, 54, 41, 40, 55, 29, 72, 22, 91, 20, 108, 23, 119, 30, 127, 38, 134, 47"
  href="#" alt="Technology" title="Technology"
  onMouseOver="if(document.images) document.getElementById('Image-Maps_9200905221105171').src= '270violet.png';"
  onMouseOut="if(document.images) document.getElementById('Image-Maps_9200905221105171').src= '270vob.png';"

area shape="poly" coords="212, 178, 222, 179, 233, 178, 247, 169, 258, 160, 265, 148, 268, 135, 267, 154, 263, 171, 255, 192, 246, 209, 235, 225, 219, 239, 203, 249, 183, 259, 159, 266, 140, 268, 123, 267, 106, 265, 86, 258, 75, 252, 65, 242, 59, 232, 53, 219, 52, 204, 55, 191, 59, 179"
  href="#" alt="Space" title="Space"
  onMouseOver="if(document.images) document.getElementById('Image-Maps_9200905221105171').src= '270blue.png';"
  onMouseOut="if(document.images) document.getElementById('Image-Maps_9200905221105171').src= '270vob.png';"

Answer 1

我不确定我是否完全理解您的意思，但如果我这样做，那么您实际上想要在点击时更改显示的图像。

如果这是您的问题，可以试试这个：

document.getElementById('Image-Maps_9200905221105171').onclick = function () {
    document.getElementById('Image-Maps_9200905221105171').src = 'image is 270orange.png';
};

如果您正在寻找一个更广泛的解决方案，其中只有一个项可以处于活动状态，我建议您稍微更改一下结构（并使用jQuery），这是jsFiddle中的建议。

如何将Active Link或Image添加到图像映射

1 个答案: