在 JavaScript 中突出显示图像的一部分

Posted 2023-05-08

【中文标题】在 JavaScript 中突出显示图像的一部分

【英文标题】：Highlight a section of an image in JavaScript

【发布时间】：2010-12-26 03:28:04

【问题描述】：

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

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

【问题讨论】：

有，但请更具体地了解该区域的大小以及您如何确定该区域。它只是他们点击的地方周围的一个正方形，还是只有特定区域？你只是想在他们的图像地图所在的地方画一个框吗？

【参考方案1】：

您可以尝试以下 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>

请注意，这仅适用于矩形链接。

【讨论】：

+1 表示纯 CSS 选项，即使它没有反转图像。

谢谢，成功了。对于链接，我使用了“display:block”，margin-top & margin-left 而不是 top & left，所以坐标是相对的。

【参考方案2】：

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

【讨论】：

使用 MapHilight 参考此示例：***.com/a/17614118/2313371

【参考方案3】：

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

【参考方案4】：

有很多方法，

以一种时尚的方式，将您的图像分解成许多小块，并使用表格将它们组合起来。之后，通过使用javascript替换thr“src”属性以获得高亮效果。

在另一种 CSS 方式中，使用 CSS 剪辑 alt。图像在原件之上，并控制应该可见的区域。

最好为所有人提供一张图片，而不是使用许多小图片来加速，用户可以通过网络立即获得它。