在餅圖上創建鏈接

我有一個包含5個相等部分的餅圖的圖像，我想爲每個部分創建一個翻轉，然後會產生一個彈出式工具提示，其中將包含文本以及每個部分鏈接到另一個頁面。在餅圖上創建鏈接

我意識到這可能是相當複雜的，所以我也玩弄了讓5個部分中的每一個都可點擊的想法，然後將用戶帶到頁面上設置的書籤。但我仍然不知道如何分開餅圖，以便每個部分都是單獨鏈接的。

餅圖在每個部分都有自定義文本，所以我無法使用我找到的通用餅圖解決方案。餅圖目前由一張圖片組成，如果需要，我可以編輯圖片。

非常感謝您的幫助。

2013-08-06 Gary

你可以使用CSS3的形狀，以您的餅圖，並讓他們點擊。或者你可以使用[google的api]（https://developers.google.com/chart/interactive/docs/gallery/piechart）或者[類似這樣的東西]（http://mistercss.blogspot.com/p/pie -chart-generator.html）。網上有很多資源 –

我會使用一個圖像映射。您可以在這裏閱讀更多關於它們的信息：http://www.w3schools.com/tags/tag_map.asp

我使用Dreamweaver繪製座標，但您可以在網上找到可以上傳圖像並在線繪製點的網站。

完成的代碼應該是這樣的：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 

<map name="planetmap"> 
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> 
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> 
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> 
</map>

來源

2013-08-06 15:28:16 wf4

結束使用Dreamweaver輕鬆製作圖像地圖。謝謝你的幫助！ – Gary

我很高興你對它進行了排序 - 另外，隨着你說你可以編輯圖像，大多數圖形包如Fireworks或Illustrator也允許你創建一個熱點並導出HTML代碼，這對你來說比Dreamweaver更容易。 – wf4

在餅圖上創建鏈接

回答

相關問題