图像映射替代方案（可能是javascript？）

好的，所以我想知道是否有一个替代的，轻量级的方法来创建一个图像地图

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

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

其他部分（我还没有命名）也应该可以这样做。另外，我希望以后能够使用javascript在这些部分后面显示滑动链接（我现在大致知道怎么做了，所以我没问题）

有人有什么建议吗？只要大致说明搜索内容就好了。

拍摄两张照片 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>

函数onHover6（图1）
{
document.getElementById（'originalimage'）。src=image1；
} 
函数onout6（图2）
{ 
document.getElementById（'originalimage'）。src=image2；
} 

---

在这里，当您将鼠标悬停在坐标上时，图像将变为hoverimages，鼠标悬停时图像将变为原始图像。

地图标签会很好，实际上并不重，因为它不需要任何外部插件。 然而，由于您只想知道一个大概的想法：有一次由于一些错误，我无法使用map标记。因此，我将原始图像分割为不同的图像（将它们定位为原始图像），然后在单独的部分上使用事件。

---

令人厌烦，但这是一个解决办法。

使用CSS很容易创建圆圈。您可以从以下内容开始：

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

---

希望它有帮助。

< P> >我很难在中间实现白色形状，但这里有一个简单的尝试：

只有三个

div

和几个css：

HTML

（Z索引用于将div堆叠在另一个div之后并达到透明度）

---

希望这有帮助：）

哦，天哪。我很确定这可以通过纯CSS实现。有点困难，但这是一个很好的挑战；）是的！我知道我可以做一个翻滚，但我希望有一种方法可以做到这一点，而不必加载六个不同的图像。我刚开始使用javascript，所以我正试图在尽可能多的地方抄近路，以降低文件大小；）@阿尔卡纳：好吧，我已经试过了，我想也许我可以把一张全彩的图片作为背景，然后让这三个圆圈以半不透明的方式覆盖图片。然后，当你把鼠标放在上面时，瞧，不透明度设置为0，图像（或部分图像）就会出现！然而！如果有一种方法可以使两个圆同时消失，以解释重叠区域，这将解决我的问题。然后我会在中间为白色部分粘贴一个图像。有什么建议吗？谢谢你迄今为止的帮助。我学到了很多。谢谢-这不是我想要的解决方案，但我不知道你能做到。我来看看我是否能玩它。哇，这是一种多么优雅的方式啊！我只是想弄清楚如何让交叉点高亮，然后也许我可以在中间粘贴一个图像来获得白色部分。谢谢是的，这是个棘手的问题！“内部”形状，白色的和你说的交叉点。你看到了CSS的应用程序了吗？我想这也有帮助。很有趣。至少在Firefox（27.0.1）中，它显示了“悬停”的弱点和/或模糊性：在交叉点内移动时，当哪个div获得不透明度1时，它会闪烁。（在三路交叉口，它在三个交叉口中的两个交叉口之间闪烁。）谢谢-我不确定我如何拼凑出如此复杂的东西，尽管XD如果没有其他办法，我可能会尝试一下：）

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

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}