可以<map>和<area>來稱呼？
如果不是，最簡單（最現代）的方式是設置單個圖像的不同區域的樣式？風格化的影像地圖
關於<map>和<area>的好處是，使用圖像映射生成器，您不必計算每個區域的位置。但似乎即使有href屬性，也不能對區域進行樣式設置。
我想這些區域有{background-color: black; opacity: 0.5;}和:hover {opacity: 0;}
我可以讓每個區域單獨的圖像，但後來我不得不將其重組爲一個圖像，我會不會覺得滿意。
也許我可以使用速度優化技術（精靈），我把我所需要的所有的圖形爲一個圖像，並顯示只有一個我需要（遊戲做到這一點的紋理和字母）。
如果任何人有比http://www.netzgesta.de/mapper/較輕的JavaScript的解決方案我也有興趣。
你可以使圖像成爲一個背景圖像，並與display:block;position:absolute;等頂部隱藏<a> s，然後當你將鼠標放在它們上面，你可以使它們成爲半透明的顏色或添加邊框或其他東西......看起來不錯，而且是相對簡單的:)
編輯：
當我早些時候嘗試這個解決方案時，我遇到了塊/內聯顯示問題。但考慮到我的形象有多簡單，似乎很容易。那謝謝啦。 – WaterBearer
現在我遇到了一個小問題，單獨使用代碼時沒問題，但現在我將它放入我的整個模板中，錨點（位置正確）就是小方格。我試過'display：block;'但那不行。 @Mark – WaterBearer
@ user2534：你設置了寬度和高度嗎？ – mpen
如果用影像地圖的工作，我建議你看看，它真的可以與許多圖像映射操作任務幫助。
它可以設置不透明度和背景顏色選擇和懸停區，只要你想，和不斷加入不同的區域在一個區域，使它們一起工作。
我還沒有嘗試過，你叫映射，因爲它的非商業執照，還有什麼不滿足的我的開發人員的需求。但我已經嘗試過ImageMapster，並且喜歡它的工作原理 - 它是MIT許可證下的強大工具，從舊版插件MapHighlite中分離出來。
關於輕量級......我懷疑這是非常重要的問題，因爲JavaScript代碼在瀏覽器中工作，並且不會降低您的服務器速度。而且在DOM /樣式操作的情況下工作很快。
它是否有助於如果您創建上圖中的黑色區域，使他們從不透明0.5到1懸停呢？ – Shomz