将 css 应用到区域地图 [英] Apply css to AREA MAP

问题描述

我为地图内的区域创建了一个非常大的地图，其中包含许多多边形区域(每个区域超过 20 个坐标).但是，您不能将 css 添加到 AREA 标记，因为我被告知它不是可见元素.我想要做的是当用户将鼠标悬停在地图上的某个区域上时，我希望通过将 1px 边框应用于特定的 AREA 元素来突出显示"它.有没有办法做到这一点?不，我不打算使用矩形.

I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.

推荐答案

如果你希望能够使用任意形状并且仍然使用样式，你是否考虑过尝试 SVG?

If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?

我不是 SVG 大师，但这里有一个我想出来的例子:http://jsfiddle.net/tZKuv/3/.对于生产，您可能希望用 none 替换默认笔划，我使用了 gray 以便您可以看到它的位置.

I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.

缺点是你会失去易于使用的区域/地图给你，但我想如果你走这条路，你可以实现你的目标.我将 cursor: pointer 添加到多边形，您可以添加 onclick 处理程序来模拟 的 href>.

The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.

一个明显的警告是浏览器支持.这似乎在 Chrome 中工作，我很确定它应该在 IE9 中工作(jsfiddle 目前不在 IE9 中工作)，但以前版本的 IE 不支持 SVG.

An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.

更新:制作了一个快速测试页面来测试 IE9.它确实按预期工作.这是来源.

Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.

再次更新:这也可以解决您在另一个问题中提出的缩放问题.

Update again: This would also solve the zooming problem you asked about in another question.

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