I'd like to make an incremental flowchart for my personal Web site. Is this possible using only my limited HTML + CSS skills? Long explanation and sample graphic inside.
Redesigning my personal site, and I've developed a recent fascination with flowcharts (stemming from when I did the now mildly famous Rashomon Chart
). Given that the site isn't that complicated, I figure I can get away with traditional navigation and just have a big flowchart that connects to individual pages. Even if it's not optimal from a Web 2.0 standpoint, hell, it's my site.
While I'm okay with general design principles, my skills at Web stuff don't extend much past some Wordpress, HTML, and CSS. As a result, the only thing I can think of to execute this idea is (a) a really big image, and (b) a really big image map that actually captures every outlink as a link. I'm sure I can figure out how to position this really big image, and have people start at the right "place" on the image, but "image + imagemap" is about as good as I can figure out on my lonesome.
is a crude early attempt at what the actual chart would look like; it's still missing connector lines between boxes and is obviously not complete yet.
All flowchart terminating points will all have links to pages within the site, or outlinks to other sites. There's a certain retro appeal to big picture + imagemap, but 1998 is calling and really wants its design ideas back.
Ideally I'd like something where the next section of flowchart is revealed when you click on a "yes" or "no" icon; the flowchart builds as you explore the "site." What would be the best approach for this? I think I could possibly pull something off by stretching my CSS + HTML abilities to the limit, but even then, I have no idea how to do the "this bit appears next" without having an entire image load.
In a perfect world, every click on the flowchart selectors would cause the next segment of the flowchart to fade in.