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

我在网页上有一个图像（可以说是美国地图），我在它下面有各种链接（可以说状态名称）（与图像分开）。突出显示图像区域 - 点击链接时

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

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

与代码示例或想法，请咨询......

我的问题是与此类似： Highlight Section of Mapped Image when Mouseover Text on Webpage
，但我不明白的是一个......

来源

2013-07-12 Jasper

其中是html和css源代码??? – falguni

http://stackoverflow.com/help/how-to-ask + http://stackoverflow.com/help/dont-ask – Paritosh

它是什么样的图像？我会为这样的事情推荐一个svg。也许使用像raphael.js（例如参见http://raphaeljs.com/australia.html），如果我没有记错，它使用svg。 –

-2

有此问题的两种方法，

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

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

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

来源

2013-07-12 05:52:36 Exception

此代码必须有帮助，我想!!!!与我们的类（例如.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-12 06:23:50 GilbertOOl

突出在鼠标悬停的地图区域已经由提供更好：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-12 07:19:13 Jasper

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

回答

相关问题