应用css到AREA MAP [英] Apply css to AREA MAP

问题描述

我创建了一个非常大的地图，地图中的地区有许多多个区域（每个超过20个坐标）。但是，您不能将CSS添加到AREA标签，因为我被告知它不是可见元素。我想做的是当用户将鼠标悬停在地图上的某个区域时，我希望通过对特定AREA元素应用1px边框来突出显示。有没有办法这样做？不，我不打算使用矩形。

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 < area> 。

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到AREA MAP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！