General Question

JohnRobert's avatar

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

Asked by JohnRobert (490points) 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

wilhel1812's avatar

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%

Perchik's avatar

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)

JohnRobert's avatar

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

Vincentt's avatar

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.

Perchik's avatar

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.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther