[ExampleOne]

Hi, I want to create something very similar to this: Interactive Olympic Village

I want to be able to draw custom shapes that when clicked on, each display different text on the page (in a 'div' maybe).

And just like the example in the link, I want to add interactive styling with mouseover, click, etc. When you hover over the shapes, they animate, then when you click on one it stays selected, allowing the hover animation to work on the other shapes, until you click on another. Also the text fading effect.

I've been looking at many ways to create it, specifically HTML5 canvas, Raphaeljs (RaphaelJS-australia), and a few others, but I can't seem to get it right.

That 'Olympic Village' is exactly what I need - can anybody help me with this please.