1

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

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

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

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

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

4

3 回答 3

2

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

这不是最简洁的解决方案，但可以完成工作。

于 2013-07-12T07:19:13.267 回答
0

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

img:hover, img:focus {
opacity:1;
background-color:red;
}
img:not(:hover), img:not(:focus){
opacity:0.5;
background-color:black;
}
于 2013-07-12T06:23:50.003 回答
-2

这个问题有两种方法，

首先是获取完整的图像并使用 HTML 创建图像映射，否则这个http://www.image-maps.com/将使您在创建图像映射时更轻松。单击链接时，只需在图像映射部分应用样式。

其次也是最好的选择是使用 Google Maps API，您可以在 google maps 文档中找到完整的文档。

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

于 2013-07-12T05:52:36.290 回答