CSS + HTML自定義形狀按鈕

我正在開發一款遊戲，它會顯示帶有可點擊國家/地區的地圖。你可以點擊國家的事實讓我很頭疼。我可以在每個國家使用圖片並使用絕對定位並附加onclick事件，但是，我必須將100張圖片傳送給每個用戶，否則我無法使用精靈和其他一些東西。我可以混淆javascript，但我猜這將是一個真正的混亂。有沒有其他的方式來實現這一點？也許更簡單，更優雅？CSS + HTML自定義形狀按鈕

來源

2011-07-26 arg20

那麼你可以使用圖像映射我猜。它在圖像上創建可鏈接的多邊形。 Illustrator可以很容易地做到這一點。您還可以查看www.image-maps.com – Matt

將圖像名稱更改爲國家/地區名稱，並使用該名稱設置每個按鈕ID並通過javascript加載 – diEcho

圖像映射：http：//www.htmlcodetutorial.com/images/images_famsupp_220.html – sled

你可以使用SVG的地圖，維基百科提供充足的：http://en.wikipedia.org/wiki/Wikipedia:Blank_maps

而這裏的點擊地理學的SVG一個例子：http://raphaeljs.com/australia.html

來源

2011-07-26 22:51:49

你不能讓SVG「點擊」...... – Ahmed

@ Ahmed：是的，你可以。 SVG元素是普通的DOM對象，因此您可以像使用HTML元素一樣使用它們。 –

真的嗎？我不知道。謝謝！並upvoted。 – Ahmed

已在客戶端加載一個單一的圖像，並使用CSS sprites顯示每個國家。

來源

2011-07-26 22:53:22

是的，但在這種情況下，我會得到矩形與圖像作爲背景，這不會給我需要的結果，因爲它們會重疊，並且不會正確成形 – arg20

使用普通的舊HTML圖像映射。這使您可以指定圖像的部分爲多邊形，每個部分都是不同的可點擊鏈接。

（您可能聽說過的語句，你不應該使用影像地圖可訪問性的原因 - 這是無關緊要的，因爲這樣做它自己的選項，如CSS精靈都是爲了這個目的更糟）

來源

2011-07-27 01:00:59

你可以使用jVectorMap插件來顯示交互式世界地圖。它基於矢量圖形（SVG和VML），適用於所有瀏覽器。

來源

2011-07-27 12:35:36 bjornd

CSS + HTML自定義形狀按鈕

回答

相關問題