我創建了一個非常大的地圖,其中包含許多聚合區域(每個座標超過20個),用於地圖內的區域。但是,您不能將CSS添加到AREA標記,因爲我被告知它不是可見元素。我想要做的是,當用戶懸停在地圖上的某個區域時,我希望通過將1px邊框應用於特定的AREA元素來「突出顯示」該區域。有沒有辦法做到這一點?不,我不打算使用矩形。將css應用於區域地圖
22
A
回答
10
如果你想能夠使用任意形狀並仍然使用樣式,你有沒有考慮嘗試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。
再次更新:這也解決了您在另一個問題中詢問的縮放問題。
2
不,沒有辦法像你所描述的那樣去做這件事。我研究過它並嘗試過。你可以做的是在各個段上設置鼠標懸停事件,並交換在同一區域內陰影的疊加圖像。
15
不可能使用CSS。
雖然您可能會檢查出Map HilightjQuery插件。
編輯10.2011
ImageMapster是一個較新的,更強大的插件,你也應該看看。
相關問題
- 1. CSS地圖區域分層
- 2. 我們可以將html css應用於LWUIT文本區域
- 3. 將CSS高度/寬度應用於可見剪輯區域?
- 4. 應用光標的CSS區地圖
- 5. JS地圖區域
- 6. 極地區域圖
- 7. 在圖像地圖區域上設置光標[使用CSS]
- 8. 將模糊濾鏡應用於svg圖像的某個區域
- 9. css僅適用於模板區域
- 10. 英國地區的區域地圖
- 11. 將地圖劃分爲統一區域
- 12. Swift - 將本地CSS應用於Web視圖
- 13. RMMapView地圖設置區域
- 14. jquery onclick與地圖區域
- 15. HTML地圖區域座標
- 16. 谷歌地圖區域/鄰域選擇
- 17. 如何將ggplot2圖例分成兩列用於區域圖
- 18. 禁用區域地圖動態請
- 19. 在Android上使用地圖區域
- 20. 填寫地圖的區域用顏色
- 21. 用於繪製矢量線的圖形「區域」IP地址
- 22. 試圖突出顯示圖像地圖區域,而beeing響應
- 23. 將外部css文件應用於作用域div標記?
- 24. (CSS)表元素重疊並隱藏地圖區域
- 25. 顏色外部邊界按css爲地圖區域
- 26. 縮放地圖/帶CSS的區域,移動網絡
- 27. 將healpy mask應用於地圖陣列
- 28. 將掩碼應用於Google地圖
- 29. CSS用於圖像上的半透明內容區域,類似於燈箱
- 30. 僅將CSS應用於Safari?
感謝您交叉引用我的其他問題。如果我們所有人都使用現代瀏覽器,我想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