How to make expanding/opening effect of diagram

Hi All,

I'd like to know if it is possible to achieve this scenario for my web design,

I've got company ITIL diagram that I'd like to make it show the hyperlink to a file download for each respective box (mouse hover / over effect)
should I create a HTML table for this or create image mappings from the VISIO diagram .vsd file ?
 
anyone know how to achieve this ?  

Thanks
managed-services-chart.jpg
LVL 1
jjozAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jjozAuthor Commented:
so when the user hover above one of the box it should display the hyperlinks to the document in another page then click that URL to go to that particular document.
twohawksCommented:
Although I have not done it myself (but I am not a noob with MS or web-dev either), I would first investigate what visio has to offer natively.
Search on the following terms:
embed visio diagram on web page

...should show you right away what some of your primary options with viso are, and how they might function.

May be good to start there, imho.
jjozAuthor Commented:
yes, you could be right, otherwise I must use any web authoring tool and then start to build that my own using HTML and CSS effects, but the problem is where to start ?
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

twohawksCommented:
How much web-authoring experience do you have?  (Just tell us a little to clue us in, so we have better perspective for providing direction for you).

Are you wanting to seriously expand on your web-authoring skills, or just "get-her-done"?

Is this a business or a home project, and is there a deadline?


jjozAuthor Commented:
actually this is a office intranet improvement project and my skill is about 5 out of 10.
thanks for the reply.
Bob StoneIT GuruCommented:
You could do it with an image map and a jQuery tooltip script shown here near the bottom of the page - http://jquery.bassistance.de/tooltip/demo/

You can download that script here - http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
jjozAuthor Commented:
thanks for the reply man, the "Image map with tooltips." looks cool let me do something about it and let you guys know abut the outcome.
Scott HelmersVisio Consultant, Trainer, Author, and DeveloperCommented:
To back up what twohawks said above: if your ITIL diagram is in Visio, what you're looking to accomplish is very easy.

To add a hyperlink to any shape in Visio, select the shape, the type CTRL+K to open the Hyperlink dialog.

If you want to link to a file, click the browse button to the right of Address, select Local File... (don't worry about "Local" -- the file can be anywhere), navigate to and select the file, click OK and you've got a hyperlink.

If you want to link to another page in the same Visio drawing, leave the Address field blank (this is critical), click the Browse button to the right of the sub-adddress field, and use the Page dropdown to select the target page.

Then select File>Save as Web Page... and you've got a fully hyperlinked web site. If you want to embed the Visio-created web content into your own web site, which it sounds like you do, there are some other options you'll need to explore, but this should get you started.

Regards,
Scott
 

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jjozAuthor Commented:
thanks man !
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.