javascript - 样式化图像映射

Question

可以<map>和 <area>有风格吗？
如果不是，那么对单个图像的不同区域设置样式的最简单(也是最现代)的方法是什么？

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

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

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

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

如果有人有比 http://www.netzgesta.de/mapper/ 更轻便的 javascript 解决方案我也有兴趣。

Answer 1

如果您使用图像映射，我建议您查看 ImageMapster JQuery plugin ，它确实可以帮助完成许多图像映射操作任务。

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

我没试过你说的Mapper，因为它是非商业许可，不能满足我开发者的需求。但我自己尝试过 ImageMapster 并喜欢它的工作方式 - 它是 MIT 许可下的强大工具，从旧插件 MapHighlite 派生而来。

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