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

Question

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

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

Answer 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>

请注意,这仅适用于矩形链接.

Answer 2

看看jQuery MapHilight.
我不确定它是否完全符合您的需要,但您可以通过微小的调整实现这一目标.