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

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

---

有什么方法可以反转（或突出显示）图像JavaScript的一小部分吗？

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

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

，然后使用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);      
}

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

HTML:

#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);      
}

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

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

请查看。

---

我不确定它是否能完全满足您的需要，但您可以通过稍微调整来实现这一点。

将半透明的

块覆盖在单击的区域上以突出显示它如何？

有很多方法

以d方式，将图像分解为许多较小的片段，并使用表格将它们组合起来。之后，使用javascript替换突出显示效果的thr“src”属性

在另一种CSS方式中，使用CSS将alt.图像剪辑到原始图像的顶部，并控制哪个区域应该可见

---

最好让所有人都有一张图像，而不是许多小图像来加速，用户可以通过网络毫不延迟地获得它。

有，但请更具体地说明区域的大小以及如何确定区域。他们点击的地方只是一个正方形，还是只有特定的区域？你只想在他们的图像映射的地方画一个框吗？纯CSS选项+1，即使它没有反转图像。谢谢，让它工作了。对于a-links，我使用了“display:block”和边距顶部和左边距，而不是顶部和左边距，因此坐标是相对的。有关使用MapHilight的信息，请参阅此示例：