在饼图图像上创建链接

时间:2013-08-06 15:14:15

标签: javascript html css image hyperlink

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

我意识到这可能是相当复杂的,所以我也想到让5个部分中的每个部分都可以点击,然后将用户带到页面上设置的书签。但我仍然不知道如何分离饼图,以便每个部分都是单独链接的。

饼图在每个部分都有自定义文字,所以我无法使用我发现的通用饼图解决方案。饼图当前由一个图像组成,如果需要,我可以编辑图像。

感谢先进的任何帮助。

1 个答案:

答案 0 :(得分:2)

我会使用图像地图。你可以在这里阅读更多相关信息: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>