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

Highlight Image Area - when a link is clicked

本文关键字：单击 链接 区域 显示 显示图 图像 高亮      更新时间：2023-09-26

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

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

我看到的所有例子都是关于当你把鼠标悬停在图像区域上时突出显示图像区域，但我想点击一个单独的链接，结果突出显示图像区。

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

我的问题与此类似：鼠标悬停在网页上的文本时高亮显示映射图像的部分
但我不能理解。。。

在mouseover上高亮显示的地图区域已经由jquery.maphilight.js提供。有很多例子可以说明它在图像本身上使用mouseover高亮显示。

为了突出显示图像区域，从一个单独的文本链接，以下是我们可以做的：

假设你的图像地图是：

<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>

然后，您可以从href链接：模拟图像区域的鼠标悬停

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

这不是最整洁的解决方案，但确实有效。

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

img:hover, img:focus {
opacity:1;
background-color:red;
}
img:not(:hover), img:not(:focus){
opacity:0.5;
background-color:black;
}

这个问题有两种方法，

首先，获取完整的图像并使用HTML创建图像地图，否则http://www.image-maps.com/将使您的生活更容易创建图像地图。点击链接只需在图像地图的部分应用样式。

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

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

相关文章：