Question

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

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

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

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

我的问题类似于： Highlight Section of Mapped Image when Mouseover Text on Webpage
但我无法理解那一个......

Answer 1

鼠标悬停时突出显示的地图区域已由：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>

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

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

这不是最好的解决方案，但可以胜任。

Answer 2

这段代码必须有用，我想!!!!我们的类（例如.usaMap）或ID（例如#usaMap）

更好

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

Answer 3

这个问题有两种方法，

首先，拍摄完整的图像并使用HTML创建图像地图，否则此http://www.image-maps.com/将使您在创建图像地图时更轻松。点击链接后，只需在图像地图部分应用样式。

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

但是期待这个要求的完整来源对我来说没有意义:)，尝试使用上面的任何选项。

突出显示图像区域 - 单击链接时

3 个答案: