如何在HTML中設置十六進制鏈接網格？

Question

我運行一個D & D活動，由許多小世界組成，每個小世界觸及6個其他人，如六角形網格。事實上，我的（sloppily）手繪地圖是在六角網格打印輸出上完成的。

我想要做的就是製作一個索引頁面，每個小世界都有自己的html頁面。

我想弄清楚如何使該索引頁上的鏈接保持在六角網格佈局中。

我想我可以在CSS中手工完成所有工作，但這看起來相當乏味，因爲我擁有大約300個不同的十六進制世界。

關於如何加快流程的任何想法？現在我能想到的最好的方法是擁有一個通用的Javascript函數，當它被加載到頁面時，每個和每個十六進制都會調用它，這會將其定位在正確的位置。

Answer 1

用map和area元素試試這個。你可以使用poly作爲形狀，然後這樣做。

http://www.w3schools.com/tags/tag_area.asp

http://www.w3schools.com/tags/tag_map.asp

Answer 2

只是猜測這裏，但我敢打賭，你可以使用CSS變換做在你的中心點6個連續60度旋轉。

概念證明：http://jsfiddle.net/FMpc9/

（注：需要一個WebKit瀏覽器，應該很容易更新到萬盎司）。