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

Question

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

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

Answer 1

您可以尝试以下 CSS 方法，而不是使用图像映射：

在每个“图像映射”部分（链接）顶部使用透明的

，然后使用 CSS ： hide 伪类来处理突出显示。

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>

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

Answer 2

看看 jQuery MapHilight。
我不确定它是否完全满足您的需要，但您可以通过细微的调整来实现这一目标。

Answer 3

如何在点击区域上覆盖一个半透明的

块以突出显示它？

Answer 4

有很多方法，

以广告时尚的方式，将您的图像分解为许多较小的部分，然后使用表格将它们组合起来。之后，通过使用javascript替换“src”属性来实现高亮效果。

另一种CSS方式，使用CSS来剪辑alt。图像位于原件之上，并控制哪个区域应该可见。

最好为所有人提供一个图像，而不是许多小图像，这样可以加快速度，并且用户可以通过网络立即获得它。