替代图像地图（也许在JavaScript？）

好的，所以我想知道如果有一种替代的，轻量级的方式来创建一个图像映射。替代图像地图（也许在JavaScript？）

基本上，我想借此图片：

而且有图点亮的部分，当他们上空盘旋，有点像这个（我嘲笑它在Photoshop）：

的其他部分（我还没有命名）应该能够做同样的。此外，我希望能够稍后使用JavaScript来从这些部分后面出现滑动链接（我现在大概知道该怎么做，所以我没关系）

有没有人有任何建议？只是寻找什么的总体方向会很好。

来源

2013-10-18 squids

哦，我的。我非常肯定，可以用纯CSS实现。有点困难，但这是一个不错的挑战;） – Arkana

是的！我知道我可以做一个翻滚，但如果有一种方法我可以做到这一点，而无需加载六个不同的图像，我很乐意。我刚开始使用JavaScript，所以我试图在尽可能多的地方尽量减少文件大小;） – squids

@ Arkana：好的，我已经玩了一下，我想也许我可以将全彩色图像作为背景，然后让这三个圆圈以半透明度覆盖图像。然后当你把鼠标放在它上面，瞧，不透明度被设置为0，并且图像（或者它的一部分）出现！然而！如果有办法让两个圆圈同时消失以解决重叠区域，那将解决我的问题。然后我会在白色部分的中间贴一张图片。有什么建议么？并感谢您的帮助。我学到了很多东西。 – squids

取两幅图像 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其改变为原始higligthed图片。

来源

2013-10-18 09:58:12 Pbk1303

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

来源

2013-10-18 10:03:30

谢谢 - 我不知道我该如何拼凑一些复杂的东西，虽然XD我可以试试它，如果没有其他作品:) – squids

圆圈很容易处理CSS。你可以像这样开始：

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

FIDDLE

希望它能帮助。

来源

2013-10-18 10:09:46 EdenSource

谢谢 - 这不完全是我正在寻找的解决方案，但我不知道你可以做到这一点。我会看看我是否无法玩弄它。 – squids

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

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放在另一个之后并达到透明度）。

希望这会有所帮助:)

来源

2013-10-18 10:22:25 Arkana

哇 - 多么优雅的做法！我只是想弄清楚如何突出显示交叉点，然后也许我可以在中间贴一个图像来获取白色部分。谢谢！ – squids

是的，那个棘手的问题！ “内在”形状，无论是白色的还是交叉点，就像你说的那样。你有没有看到CSS的[Chrome徽标]（http://cssnerd.nl/articles/pure_css_chrome_logo.html）？我认为它也可以提供帮助。 – Arkana

有趣。至少，在Firefox（27.0.1）中，它显示了“悬停”的弱点和/或模糊性：在交叉点内移动时，它会闪烁，因为div会不透明度1交替变化。（在三路交叉路口，三条路线中的两条之间闪烁）。 – fortboise

替代图像地图（也许在JavaScript？）

回答

相关问题