將css應用於區域地圖

我創建了一個非常大的地圖，其中包含許多聚合區域（每個座標超過20個），用於地圖內的區域。但是，您不能將CSS添加到AREA標記，因爲我被告知它不是可見元素。我想要做的是，當用戶懸停在地圖上的某個區域時，我希望通過將1px邊框應用於特定的AREA元素來「突出顯示」該區域。有沒有辦法做到這一點？不，我不打算使用矩形。將css應用於區域地圖

來源

2011-02-17 peter

如果你想能夠使用任意形狀並仍然使用樣式，你有沒有考慮嘗試SVG？

我不是SVG大師，但這裏是我掀起的一個例子：http://jsfiddle.net/tZKuv/3/。對於生產，您可能需要使用none替換默認筆劃，我使用gray，以便您可以看到它在哪裏。

缺點是，你會失去易用的區域/地圖給你，但我想你可以完成你的目標，如果你走這條路線。我將cursor: pointer添加到多邊形，並且您可以添加onclick處理程序來模擬<area>的href。

一個明顯的警告是瀏覽器支持。這似乎在Chrome中工作，我很確定它應該在IE9中工作（目前jsfiddle在IE9中不工作），但以前的IE版本不支持SVG。

更新：做了一個快速測試頁來測試IE9。它確實按預期工作。 Here's the source。

再次更新：這也解決了您在另一個問題中詢問的縮放問題。

來源

2011-02-17 08:28:31 Sapph

感謝您交叉引用我的其他問題。如果我們所有人都使用現代瀏覽器，我想SVG會是理想的。唯一的缺點是您可能會忽略仍在舊版瀏覽器（如IE7和IE6）上的用戶，即使IE6現在還不能正式支持微軟。 – peter 2011-02-18 09:44:00

@PeterBZ這可能是頭痛的誘因，但我相信你可以爲不支持SVG的瀏覽器添加回退行爲（即http://www.kaizou.org/2009/03/inline-svg-fall）。我猜想，要權衡多少開發時間才能使其完全跨瀏覽器，而不是多麼容易實現。祝你好運！ – Sapph 2011-02-18 17:45:44

不，沒有辦法像你所描述的那樣去做這件事。我研究過它並嘗試過。你可以做的是在各個段上設置鼠標懸停事件，並交換在同一區域內陰影的疊加圖像。

來源

2011-02-17 08:25:28

不可能使用CSS。
雖然您可能會檢查出Map HilightjQuery插件。

編輯10.2011
ImageMapster是一個較新的，更強大的插件，你也應該看看。

來源

2011-02-17 09:06:00

將css應用於區域地圖

回答

相關問題