图像映射替代（可能在javascript？）

Question

好吧，所以我想知道是否有另一种轻量级的方法来创建图像映射。

基本上，我想拍这张照片：

当图表的各个部分悬停时，它们会亮起来，有点像这样（我在photoshop中嘲笑过它）：

其他部分（我还没有命名）应该能够做同样的事情。此外，我希望以后能够使用javascript在这些部分后面显示滑动链接（我现在大致知道如何操作，所以我很好）

有没有人有任何建议？只是关于搜索内容的一般方向会很棒。

Answer 1

地图标记很好，实际上并不重量级，因为它不需要任何外部插件。 但是，因为您只想要一个大概的想法：一旦由于某些错误，我无法使用地图标记。因此，我将原始图像分割成不同的图像（将它们定位为原始图像），然后在不同的部分上使用事件。 Tiresome，但是一种解决方法。

Answer 2

使用CSS很容易做到圈子。你可以从这样的事情开始：

width: 140px;
height: 140px;
background: rgba(255, 0, 0, 0.3);
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;

<强> FIDDLE

希望有所帮助。

Answer 3

我很难在中间达到白色的形状，但这是一个简单的尝试：

http://jsfiddle.net/w8zTz/

只有三个div和几个css：

HTML

<div class="rojo"></div>
<div class="azul"></div>
<div class="amar"></div>

CSS

div {width:100px; height:100px; border-radius:100px; position:absolute; opacity:0.5;}
.rojo {background:red; top:0; left:30px;}
.azul {background:cornflowerblue; top:60px; left:0;}
.amar {background:gold; top:60px; left:70px;}
div:hover {opacity:1; z-index:-1}

（Z-index用于将div叠加在另一个之后并达到透明度）。

希望这会有所帮助：）

Answer 4

拍摄两张照片 1）正常图像 2）悬停图像时特定部分高亮显示

<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" />   

<map name="Map" id="Map">      
  <area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('higlightedimageonhover-imagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/>

</map>



<script>


function onHover6(image1)
{
document.getElementById('originalimage').src=image1;
} 
function onout6(image2)
{ 
document.getElementById('originalimage').src=image2; 
} 
</script>

当您在坐标上hover时，图像会变为hoverimages，on mouseout会更改为原始图像。