造型图像地图 [英] Styling an image map

问题描述

可以将< map> 和< area> 样式？

如果不，最简单（最现代）的方式是为单个图像设计不同的区域？

Can <map> and <area> be styled ?
If not, what's the simplest (and most modern) way to style different zones of a single image ?

< map> 和< area> 是使用图像映射生成器，不必计算每个区域的位置。但是，似乎即使有一个href属性，您也不能使用样式区域。

The nice thing about <map> and <area> is that with an image map generator you don't have to calculate the position of each zone. But it seems that even though there's an href attribute, you can't style areas.

我希望区域具有 {background-color：黑色;不透明度：0.5;} 和：hover {opacity：0;}

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

I could make each zone a separate image but then I would have to reassemble them into one image and I'll never feel satisfied with this.

也许我可以使用速度优化技术（精灵），我把所有需要的图形都放在一个图像中，只显示一个我需要的图形（游戏为纹理和字母做这个）。

Perhaps I could use the speed optimized technique (sprites) where I put all graphics I need into one image and display only the one I need (games do this for textures and letters).

如果任何人比 http：/ /www.netzgesta.de/mapper/ 我也很感兴趣。

If anyone has a lighter javascript solution than http://www.netzgesta.de/mapper/ I'm also interested.

推荐答案

你可以使图像成为背景图像和地方不可见< a> 顶部与 display：block; position：absolute; 等那么当你将鼠标悬停在它们上方时，你可以使它们成为半透明的颜色，或添加边框或某些东西，这可能看起来不错，而且比较简单：）

You could make the image a background image and place invisible <a>s over top with display:block;position:absolute; etc. and then when you mouse over them, you could make them semi-transparent colors or add borders or something... that would probably look nice, and be relatively simple :)

编辑：示例

这篇关于造型图像地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！