0

I need to draw a simple "flow chart" that is used to navigation on my site. What I have been doing now is that I've drawn this MSPaint, then I add pixelmaps so that it navigate the user to different pages according to where in the pictures he clicks.

What I also want is that the page the user is on, changes colour (for instance, if user clicks on step 3, he navigates to page 3, and the page 3 changes colour to to green).

Navigation Flow Chart

What is the best method to implement this? SVG? Canvas? JavaScript? CSS?

All answers that can point me to the right direction is very welcome.

1 Answer 1

0

Your first mistake here, I'd say, is that you're using pixelmaps; for something as simple as this, I'd recommend just making it a pure HTML/CSS entity, then giving a .active class or some equivalent to whatever page you're actually on. This is the easiest way of doing things in my books, and it has the benefit of degrading gracefully if the image fails to load for whatever reason.

That said, if you don't want to do it that way and are really attached to the static image for whatever reason, you could have variants of that image where the specific step is highlighted, and display whatever image is appropriate for that page. That would accomplish what you're looking for, but I wouldn't recommend it--it's very heavy in terms of network usage when compared with an HTML solution.

Now, bear in mind you could draw this with canvas, but that seems like overkill in this situation if you're basically just drawing a navbar; if you were drawing a full flowchart already and just wanted to reuse that code, well, that would be a different story; but in this case, with static imagery, just use HTML--it's just faster and easier.

2
  • Hi, do you mean I should draw the shapes with CSS code? And then use an .active class to give them the effect I want, or draw the picture in e.g. illustrator, and then "glue" them togethere with HTML / CSS?
    – williamwmy
    Commented Jun 15, 2013 at 9:56
  • Either! Both would work, although for backwards compatibility I'd use a background image you made and just change that with a . active class.
    – moberemk
    Commented Jun 15, 2013 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.