在饼图图像上创建链接

【问题标题】：Creating Links on a Pie Chart Image在饼图图像上创建链接
【发布时间】：2013-08-07 16:35:28
【问题描述】：

我有一个包含 5 个相等部分的饼图图像，我想为每个部分创建一个翻转，然后生成一个弹出工具提示，其中包含文本以及每个部分到另一个页面的链接。

我意识到这可能涉及到相当多的问题，所以我也在考虑让 5 个部分中的每一个都可点击，然后将用户带到页面上的书签集。但我仍然不知道如何分离饼图，以便每个部分单独链接。

饼图的每个部分都有自定义文本，因此我无法使用我找到的通用饼图解决方案。饼图目前由一张图像组成，如果需要，我可以编辑图像。

在此先感谢您的帮助。

【问题讨论】：

您可以只使用 CSS3 形状来形成您的饼图，也可以让它们可点击。或者你可以使用google's api 或者something like this。网上资源很多

标签： javascript html css image hyperlink

【解决方案1】：

我会使用图像映射。你可以在这里阅读更多关于它们的信息：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>

【讨论】：

最终使用 Dreamweaver 轻松创建图像映射。感谢您的帮助！
我很高兴你把它整理好了 - 另外，你说你可以编辑图像，大多数图形包，如 Fireworks 或 Illustrator 也允许你创建一个热点并导出 HTML 代码，它是对您来说比 Dreamweaver 容易得多。