11

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

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

4

4 回答 4

14

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

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

于 2009-12-13T09:40:29.143 回答
7

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

于 2009-12-13T09:42:13.247 回答
0

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

于 2009-12-13T09:42:28.507 回答
0

方法很多，

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

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

最好为所有人提供单个图像，而不是使用许多小图像来加速，用户将通过网络立即获得它。

于 2009-12-13T09:44:35.033 回答