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

Question

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

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

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

非常欢迎所有可以为我指明正确方向的答案。

Answer 1

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

也就是说，如果您不想那样做，并且出于某种原因真的附加到静态图像，您可以使用该图像的变体，其中突出显示特定步骤，并显示适合该页面的任何图像。这将完成您正在寻找的东西，但我不推荐它 - 与 HTML 解决方案相比，它在网络使用方面非常繁重。

现在，请记住，您可以使用画布进行绘制，但如果您基本上只是在绘制导航栏，那么在这种情况下这似乎有点过分了；如果您已经在绘制完整的流程图并且只是想重用该代码，那将是另一回事；但在这种情况下，对于静态图像，只需使用 HTML——它更快更容易。