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

【问题标题】：image map alternative (maybe in javascript?)图像地图替代品（也许在 javascript 中？）
【发布时间】：2013-10-18 09:46:46
【问题描述】：

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

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

当图表的各个部分悬停时它们会亮起，有点像这样（我已经在 Photoshop 中模拟了它）：

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

有人有什么建议吗？只是一个关于搜索内容的大致方向会很棒。

【问题讨论】：

天哪。我很确定这可以通过纯 CSS 来实现。有点困难，但这是一个很好的挑战；）
是的！我知道我可以做一个翻转，但如果有一种方法我可以做到这一点而不必加载六个不同的图像，我会很高兴。我刚开始使用 javascript，所以我试图在尽可能多的地方偷工减料以减小文件大小；)
@Arkana: 好吧，我玩了一下这个，我想也许我可以把一个全彩色的图像作为背景，然后让这三个圆圈以半透明度覆盖图像.然后，当您将鼠标放在它上面时，瞧，不透明度设置为 0，并且图像（或它的一部分）出现了！然而！如果有办法让两个圆圈同时消失以解决重叠区域，那将解决我的问题。然后我会在中间贴一张图片作为白色部分。有什么建议？并感谢您迄今为止的帮助。我学到了很多。

标签： javascript jquery css imagemap

【解决方案1】：

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

【讨论】：

谢谢 - 我不知道如何拼凑一些复杂的东西，不过 XD 如果没有其他方法，我可能会尝试一下 :)

【解决方案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

希望对您有所帮助。

【讨论】：

谢谢 - 这不是我正在寻找的解决方案，但我不知道你能做到这一点。我会看看我是否不能玩它。

【解决方案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 堆叠在另一个后面并达到透明度）。

希望这会有所帮助:)

【讨论】：

哇——多么优雅的方式啊！我只是想弄清楚如何突出显示交叉点，然后也许我可以在中间贴一张图像以获得白色部分。谢谢！
是的，这就是棘手的问题！如您所说，“内部”形状，白色和交叉点。你看到 Chrome logo 和 CSS 了吗？我认为它也可以提供帮助。
有趣。至少在 Firefox (27.0.1) 中，它显示了“悬停”的弱点和/或模糊性：在交叉路口内移动，它会随着 div 的不透明度 1 交替而闪烁。（在 3 路交叉口中，它仅在三个交叉口中的两个之间闪烁。）

【解决方案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 它会变为原始图像。

【讨论】：