Hi
I have been given a project by a friend who's website I maintain which is to set up a flowchart as a page on their business website where each individual item on the flowchart has a 'further information' pop up on mouseover which is a clickable link to the individual product page for that particular item. Each box in the flowchart will have a variety of items in it, each with different popup boxes and different links they relate to.
I have tried going about this in various different ways, as a PDF embedded into the page they want it displayed on, or using css/php to code it, or using specific flowchart software. But as of yet I haven't found one thing that really fits all the criteria I need.
I'm wondering how others would go about this, would you set it up as an image with an image map for all the links etc.? or maybe something else?
I'd be grateful for any pointers or suggestions on best ways to go about this project please.
Many thanks
Jo
Best way to approach new project
Moderator: General Moderators
Re: Best way to approach new project
I sure wouldn't use images and image maps, especially if the flowchart has any likelihood of changing later -- and they always do! Same for using Flash. My own approach would be to use css and html (I don't see any role for php, from what little you've told us). Unless it's a truly complex flowchart, I should think that <div> elements with borders and text links would be reasonably easy to construct and much easier to modify. You can use absolute positioning to place them wherever you need to.
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: Best way to approach new project
If they (or you) are bent on using images, have a look at CSS Sprites http://tinyurl.com/d7bp3wv. All your images in one place, saves space, etc.
The problem here, as pointed out by Califdon, is that your flowchart is likely to change. Apart from that the size of the images will have an effect on page loading times. Image maps should only be used in special instances: a image that isn't subject to regular change. Plain HTML also means anyone who disable images on their browser can still read the flowchart, mobile users aren't subject to disproportionate page views.jofield wrote:would you set it up as an image with an image map for all the links etc.?
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering