Hi

This can be done using html5/css3 and javascript. But you may wish to look at doing this in the Adobe Edge program as it will probably be less time intensive to recreate using that program.

However no matter which method is used, it will not work in IE8 and below, (and smooth transitions do not work in IE9).

PZ

Hi

All these are possible using the Edge interface. Your best course of action would be to check out the various videos associated with using Edge, and post specific questions on the Edge forum - http://forums.adobe.com/community/labs/edge , (links to videos and tutorials are also on this page).

One question though. Why do you wish to use Edge, (or html5/css) to create the interface?

If it is for use on Tablet or Smartphone devices then it will not work. The reason for this is that none of the effects will actually be usable/viewable as shown, as the link will be activated immediately the user 'moves' over it with their finger, (touch screen). It is possible to 'capture' the onclick event and prevent it actually going to the page that is linked to, but then you would have to actually create your own event action for the user to do so, and it is unlikely that a user would even consider learning a new event that is custom to your site.

PZ

Hi

A page that works across all devices with an interactive chart as shown in your link, would be impossible to use on touch devices, sorry!

This is one of the problems that many people face when they first start to convert to html5/css3, (or create new) a flash type animation, (with embedded links) that works on touch devices such as tablets and smartphones, and for many it requires a radical re-think of how the interface should work.

Without very specific info, my advice can obviously only be of the general variety, but as an example of the problems with doing this x-device -

If you were to create one page to do this and a user with an iPhone, (or similar) was to try and use the page, it is highly likely that the page would not fit on the screen at a sufficient size to be usable. Yes, the user can 'zoom' the page, but in order to do so they must touch the screen, and it is highly likely that a link would be activated to another page in doing so.

If you are not proficient in css3 transitions/transforms, css3 animations and JavaScript, (my preferred method, with a Flash fallback) the simplest solution would be to use Flash for the desktop version, then a separate, (touch-friendly) version for the tablet and smartphone users, (using media-queries).

You could still have the content enlarge on touch for tablet and smartphones using just the css3 transitions/transforms I mentioned, and use css to show/hide the link, (depending on the animation state, triggered via javascript) but the problem comes when the user tries to activate the link as the state would then change back to hide if the user removes their finger from the device.

PZ