我目前正在尝试为我的网站创建一个蓝色，圆形，饼图式的图像。圆圈将分为6个不同的部分。
我想要发生的是，当用户将鼠标悬停在特定细分受众群上时，此细分受众群将变为橙色，并且某些文字将显示在与该细分受众群对应的圆圈旁边。
我在网上找到了一些资源，几乎达到了我使用CSS图像映射所需要的效果。 http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/但是，这些技术使用矩形分割图像。如果我拆分一个圆形物体，我宁愿根据特定弧线分割该区域。
我认为这超出了纯HTML和CSS的范围。虽然我已经掌握了JQuery的经验，但我对Web语言没有很多经验。我需要哪些技术来解决我的问题以及哪种技术最适合实现它？
答案 0 :(得分：3)
您可以创建非矩形的图像地图，但使用多边形形状。
这个有用的工具http://www.image-maps.com/可以让您实现所需的目标，而无需编写自己的多边形映射！
答案 1 :(得分：1)
一些选择：
HTML图片地图
创建一个非常接近圆形每个切片形状的HTML图像映射很简单，但HTML图像映射存在限制。例如，您无法在图像映射的每个切片内嵌套内容（作为实现悬停弹出窗口的简单方法）。如果HTML图像映射适合您，那么这是最简单的解决方案。
CSS图片地图
要定义圆形切片形状，CSS图像地图是不切实际的，除非您只需要对每个圆形切片进行非常粗略的热点近似。但是如果你能接受它，那么就功能而言你会有更大的灵活性。
<强>的OnMouseMove
您还可以使用整个圆圈的onmousemove事件处理程序获取鼠标坐标，然后进行自己的计算以确定鼠标所在的圆形切片。这样您就可以准确定义每个圆形切片的热点，并且你比HTML图像映射更灵活。但计算可能需要一些工作。
答案 2 :(得分：0)
我有一个解决方案，主要使用HTML和CSS以及一小部分jQuery来处理圆圈侧面文本的显示。
然而，它确实使用了一些不受广泛支持的CSS属性，例如pointer-events