Javascript 切片图像以制作小部件

上图中有6个齿轮（带尖边的圆圈）。我想做的是将它们制作成单独的图片，然后在每张图片的悬停处，应该会弹出带有相关文本的相关行。我该如何处理这个问题

切片图像后，这些齿轮的对齐方式应相同

---

我在如何处理这个问题上遇到了困难。一种方法是将它们切片，然后绝对定位所有图像，但它必须在至少与此图像大小相同的屏幕上工作。

您可以在Adobe Illustrator中绘制此图像并另存为SVG。然后将其放入html中，为其元素编写动画和样式。像普通的html标记一样，我们为普通的html标记编写代码

这个问题要么过于宽泛，基于观点，要么需要讨论，因此对于堆栈溢出来说是离题的。如果您有一个具体的、可回答的编程问题，请提供完整的详细信息。请尝试使用图像地图。这里有一个工具来帮助你，加油，伙计。：/我应该怎么做才能使它不太宽泛？如果有问题要求我们建议、查找或推荐一本书、工具、软件库、插件、教程、解释一种技术或提供任何其他非现场资源，则堆栈溢出与此无关