样式化图像映射

时间:2011-11-05 03:02:53

标签: javascript html css image map

可以设置<map><area>的样式吗? 如果没有,那么为单个图像的不同区域设置样式的最简单(也是最现代)的方法是什么?

关于<map><area>的好处是,使用图像地图生成器,您无需计算每个区域的位置。但似乎即使有一个href属性,也无法设置区域样式。

我希望区域有{background-color: black; opacity: 0.5;}:hover {opacity: 0;}

我可以让每个区域成为一个单独的图像但是我必须将它们重新组合成一个图像,我将永远不会对此感到满意。

也许我可以使用速度优化技术(精灵),我将所需的所有图形放入一个图像中,只显示我需要的图像(游戏对纹理和字母执行此操作)。

如果有人有比http://www.netzgesta.de/mapper/更轻松的JavaScript解决方案,我也很感兴趣。

2 个答案:

答案 0 :(得分:1)

如果您使用图像地图,我建议您查看ImageMapster JQuery plugin,它可以帮助解决许多图像映射操作任务。

它可以根据需要为选定区域和悬停区域设置不透明度和背景颜色,并且可以在一个区域中加入不同区域,使它们协同工作。

我没有尝试过你命名的Mapper,因为它是非商业许可证,不能满足我的开发人员需求。但是我自己尝试过ImageMapster并且喜欢它的工作原理 - 它是MIT许可下强大的工具,从旧插件MapHighlite分离出来。

关于轻量级......我怀疑这是非常重要的问题,因为javascript代码在浏览器中工作,并且不会减慢您的服务器速度。在DOM /样式操作的情况下,操作非常快。

答案 1 :(得分:0)

您可以将图片设为背景图片,并将隐身<a>放在顶部display:block;position:absolute;等等,然后当您将鼠标悬停在它们上方时,可以将它们设为半透明颜色或添加边框或一些......可能看起来不错,并且相对简单:)

修改: example