使用JavaScript突出显示图像的一部分

问题描述：

我运行一个小网页，允许用户使用图像地图点击各种链接。我想突出显示用户点击的部分以向用户提供一些反馈（他们可能会快速点击几个不同的部分）。使用JavaScript突出显示图像的一部分

有没有一种方法可以颠倒（或以其他方式突出显示）JavaScript图像的一小部分？

感谢，

有，但请具体说明该地区的大小以及您如何确定该地区。这只是他们点击的广场或只有特定区域？你只是想绘制一个他们的图像地图是一个盒子？ – 2009-12-13 09:40:12

答

而不是使用影像地图，你可以试试这个CSS方法：

使用上的每个“图像映射”部分（链接）上面的透明<div>，然后使用CSS :hover伪类来处理突出显示。

CSS：

#image { 
    position: relative; 
    width: 400px; 
    height: 100px; 
    background-image: url(image_map.png); 
} 

#map-part { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: transparent; 
} 

#map-part:hover { 
    background-color: yellow;   /* Yellow Highlight On Hover */ 
    opacity: 0.2; 
    filter: alpha(opacity=20);  
}

HTML：

<div id="image"> 
    <a id="map-part" href="http://www.example.com/"></a> 
</div>

注意，这只会为矩形环节的工作。

对于纯CSS选项+1，即使它不是反转图像。 – 2009-12-13 10:48:14

+1非常巧妙的解决方案 – Xavi 2009-12-29 00:36:33

谢谢，让它工作。对于我使用“display：block”的a-links，以及margin-top＆margin-left而不是top＆left，所以坐标是相对的。 – 2011-09-22 09:58:21

答

看看jQuery MapHilight。
我不确定它是否完全符合您的需求，但您可以通过稍微调整来实现。

+1不错的插件！ – 2009-12-13 09:43:21

请参考本例使用MapHilight：http://stackoverflow.com/a/17614118/2313371 – 2014-08-14 12:29:48

答

如何将半透明<DIV>块覆盖在点击区域以突出显示它？

答

有很多种方式，

在d时尚的方式，您的图像分解成许多小块，用表格把它们结合起来。之后，通过使用javascript替换突出显示效果的thr“src”属性。

在另一种CSS方式中，使用CSS来剪切alt。原图顶部的图像，并控制哪个区域应该可见。

最好为所有人提供一张图片，而不是多张小图片以加快速度，用户可以毫不拖延地通过网络获取图片。

使用JavaScript突出显示图像的一部分

相关推荐