javascript - 图像地图替代品（也许在 javascript 中？）

Question

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

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

并让图表的部分在悬停时亮起，有点像这样（我在 Photoshop 中模拟了它）：

其他部分（我还没有命名）应该能够做同样的事情。另外，我希望以后能够使用 javascript 从这些部分后面显示滑动链接（我现在大致知道该怎么做，所以我没关系）

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

Answer 1

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

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;

小提琴

希望它有所帮助。

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变为原始图像。