Menu 在网页上绘制流程图作为导航菜单

我需要画一个简单的“流程图”，用于在我的网站上导航。我现在所做的是，我画了这个MSPaint，然后我添加了像素贴图，这样它可以根据用户单击图片的位置将用户导航到不同的页面

我还希望用户所在的页面改变颜色（例如，如果用户单击第3步，他将导航到第3页，第3页将颜色更改为绿色）

实现这一点的最佳方法是什么？SVG？帆布？JavaScript？CSS

---

所有能为我指明正确方向的答案都是非常受欢迎的

我想说，你在这里的第一个错误是，你使用的是像素贴图；对于像这样简单的东西，我建议只将其设置为一个纯HTML/CSS实体，然后提供一个.active类或与您实际所在页面相当的类。在我的书中，这是最简单的方法，如果图像由于任何原因无法加载，它的好处是优雅地降级

也就是说，如果您不想这样做，并且出于任何原因确实附加到静态图像，您可以在该图像的变体中突出显示特定步骤，并显示适合该页面的任何图像。这将实现您想要的功能，但我不推荐使用它——与HTML解决方案相比，它在网络使用方面非常繁重

---

现在，记住你可以用画布来画，但是如果你基本上只是画一个导航条的话，在这种情况下，这看起来太过分了；如果你已经画了一个完整的流程图，只是想重用代码，那么，情况就不同了；但是在这种情况下，使用静态图像时，只需使用HTML即可，它更快速、更简单。

Hi，你是说我应该用CSS代码绘制形状吗？然后使用.active类给它们我想要的效果，或者用illustrator等工具画出图片，然后用HTML/CSS将它们“粘合”在一起？或者！这两种方法都可以，不过为了向后兼容，我会使用你制作的背景图像，然后用。活跃的班级。