Javascript 高亮显示图像区域-单击链接时

我在网页上有一张图片（比如美国地图），下面有各种链接（比如州名）（与图片分开）

当我点击州名链接时，图像中的州区域（美国地图图像）应高亮显示（或更改颜色等）

我看到的所有示例都是关于当您将鼠标悬停在图像区域上时高亮显示图像区域，但我想单击一个单独的链接，从而高亮显示图像区域

请用代码示例或想法提供建议

我的问题与此类似：

---

但是我不能理解一个…

解决这个问题有两种方法

首先，获取完整图像并使用HTML创建图像映射，否则这将使创建图像映射的过程更轻松。单击链接后，只需在图像贴图的部分应用样式

第二个也是最好的是使用谷歌地图API，您可以在谷歌地图文档中找到完整的文档

---

但是，期待这个需求的完整源代码对我来说没有意义：），请尝试使用上面的任何选项。

我认为这段代码一定很有帮助！！！！使用我们的类（example.usaMap）或ID（example#usaMap）更好

---

鼠标上方突出显示的地图区域已经由jquery.maphilight.js提供。有许多使用鼠标在图像上突出显示的例子

要突出显示图像区域，请使用单独的文本链接，我们可以执行以下操作：

假设您的图像映射为：

<map name="mymapname">
    <area id="myAreaId" href="#" shape="poly" coords="32,71,116,77,142,81,145,125,34,
    106" alt="Link" title="Default behavior">
...
</map>

---

这不是最简洁的解决方案，但可以解决问题。

html和css源代码在哪里？+这是什么样的形象？对于这种事情，我建议使用svg。如果我没记错的话，还可以使用raphael.js（参见示例）之类的东西，它使用svg。

<map name="mymapname">
    <area id="myAreaId" href="#" shape="poly" coords="32,71,116,77,142,81,145,125,34,
    106" alt="Link" title="Default behavior">
...
</map>

<a id="mylink" href="#" onmouseover="$('#myAreaId').trigger('mouseover');" 
onmouseout="$('#myAreaId').trigger('mouseout');">My Link</a>