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 我不确定它是否完全符合你的需要，但你可以通过微小的调整实现这一点。

Answer 3

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

Answer 4

有很多方法，

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

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

最好为所有而不是许多小图像设置单个图像以加快速度，用户可以毫不拖延地通过网络获取图像。

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

4 个答案: