0

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

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

导航流程图

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

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

4

1 回答 1

0

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

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

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

于 2013-06-14T12:45:22.093 回答