How do I zoom in/out on a vector graphic image using HTML?

Asked by JohnRobert (490

) December 6th, 2008

I’m using Dreamweaver to create a web page. The page will have a flowchart that is too big to fit onto the monitor all at once. I could leave it full size, and require the use of scroll bars, but it is hard to visualize the entire flow using that method. I would like to know if I can draw the flowchart in Adobe Illustrator and save as a vector graphic, and then have a web page with zoom in/out capability. I did find that I could create a Visio flowchart and SaveAs Webpage. It allows me to zoom in and out, but I don’t know how to duplicate that effect using Dreamweaver.

Observing members: 0

Composing members: 0

5 Answers

You could export it as a flash file and make the size 100% or you could save it as bitmap in high resolution, and then let the browser resize it to 100%

wilhel1812 (2882

)“Great Answer” (0

) Flag as…

Do it in visio and then dissect it. You can set the width of a graphic using css.. my guess is they change the css for the graphic when you zoom in.

Another thing you could look into on google is Scalable vector graphics (SVG)

Perchik (5007

)“Great Answer” (0

) Flag as…

Thanks wilhel & Perchik. I’ll experiment with those ideas and see what happens.

JohnRobert (490

)“Great Answer” (0

) Flag as…

You should be able to export it as an SVG image (which at least Firefox can display if it’s not too complicated, I believe) and then just set the height and width. For IE (<7 or <8?) you’ll probably need to create an alternate bitmap version with fixed dimensions.

Vincentt (8094

)“Great Answer” (0

) Flag as…

From what I saw about SVGs… you can get IE plugins that can handle them, but there doesn’t appear to be any native support.

Perchik (5007

)“Great Answer” (0

) Flag as…