Javascript 如何添加活动链接或图像到图像映射

当我单击第一个区域的链接时，我希望图像

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';"

---

我不确定我是否完全理解您的意思，但如果我理解了，那么您实际上希望在单击时更改显示的图像

如果这是您的问题，您可以尝试以下方法：

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

---

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

什么是激活？首先感谢您的快速响应。我的意思是，就像nav nemu一样，当你在那个页面上时，文本“home”的颜色会从黑色变为红色。在我的例子中，当我将鼠标悬停在我创建的图像映射（图像为270vob.png）上时，有一个不同的图像（图像为270orange.png），然后单击该区域并转到相关页面时，我希望图像270orange.png显示或处于活动状态，而不是270vob.png。我不确定这是否有意义（请查看我现在创建的网站的侧栏：http://fybw.aggiedevelopment.org/6232-2