我正在開發一款遊戲,它會顯示帶有可點擊國家/地區的地圖。你可以點擊國家的事實讓我很頭疼。我可以在每個國家使用圖片並使用絕對定位並附加onclick事件,但是,我必須將100張圖片傳送給每個用戶,否則我無法使用精靈和其他一些東西。我可以混淆javascript,但我猜這將是一個真正的混亂。有沒有其他的方式來實現這一點?也許更簡單,更優雅?CSS + HTML自定義形狀按鈕
2
A
回答
5
你可以使用SVG的地圖,維基百科提供充足的:http://en.wikipedia.org/wiki/Wikipedia:Blank_maps
而這裏的點擊地理學的SVG一個例子:http://raphaeljs.com/australia.html
0
已在客戶端加載一個單一的圖像,並使用CSS sprites顯示每個國家。
+0
是的,但在這種情況下,我會得到矩形與圖像作爲背景,這不會給我需要的結果,因爲它們會重疊,並且不會正確成形 – arg20
1
使用普通的舊HTML圖像映射。這使您可以指定圖像的部分爲多邊形,每個部分都是不同的可點擊鏈接。
(您可能聽說過的語句,你不應該使用影像地圖可訪問性的原因 - 這是無關緊要的,因爲這樣做它自己的選項,如CSS精靈都是爲了這個目的更糟)
1
你可以使用jVectorMap插件來顯示交互式世界地圖。它基於矢量圖形(SVG和VML),適用於所有瀏覽器。
相關問題
- 1. 自定義按鈕形狀
- 2. 如何在html/css中自定義形狀的按鈕?
- 3. 爲按鈕創建自定義形狀
- 4. WPF自定義形狀的按鈕
- 5. Android:自定義形狀的按鈕
- 6. Android:自定義按鈕形狀
- 7. 自定義按鈕,在HTML和CSS
- 8. 如何自定義按鈕(CSS,HTML)
- 9. 按鈕形狀可能與PHP/CSS/HTML?
- 10. 自定義圓形按鈕
- 11. 與CSS的按鈕形狀
- 12. Android自定義按鈕按狀態
- 13. 使用CSS創建自定義形狀
- 14. css自定義形狀的背景色
- 15. 陰影與CSS梯形形狀按鈕
- 16. HTML/CSS中的自定義形狀文本區
- 17. CSS定義形狀橢圓
- 18. 在Ext Panel Header中自定義形狀按鈕失敗
- 19. 創建自定義形狀/可繪製 - 6面按鈕
- 20. 自定義形狀回收站查看與按鈕的onclick
- 21. 真正的自定義形狀的按鈕
- 22. 如何使按鈕形狀在WPF中的自定義路徑?
- 23. Android的Facebook和谷歌登錄。自定義按鈕形狀
- 24. UINavigationBar形狀的自定義後退按鈕
- 25. 自定義按鈕處理狀態
- 26. 用自定義形狀自定義ImageView
- 27. 角形formly按鈕自定義類型
- 28. 使用css自定義單選按鈕
- 29. 如何自定義HTML或按鈕添加到ActiveAdmin形式
- 30. Javascript/JQuery自定義HTML播放按鈕
那麼你可以使用圖像映射我猜。它在圖像上創建可鏈接的多邊形。 Illustrator可以很容易地做到這一點。您還可以查看www.image-maps.com – Matt
將圖像名稱更改爲國家/地區名稱,並使用該名稱設置每個按鈕ID並通過javascript加載 – diEcho
圖像映射:http://www.htmlcodetutorial.com/images/images_famsupp_220.html – sled