0

UPDATE:

Hi Guys, this is how far I've gotten: http://jsfiddle.net/vsJMn/ (I'm testing with the 'RaphaelJS australia' example)

The only problem I can't figure out now is how to revert the state of an element back to 0 when another element is clicked. I've worked out how to get an 'active/selected' state when I click on an element, and the hover then works on the rest, but then any element that is clicked on is stuck on that last state and the hover event doesn't work on it any more.

Does anybody know how to fix this?


OLDER QUESTION:

I want to create something very similar to this: http://www.voanews.com/content/olympic-village-map/1446501.html

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 (http://raphaeljs.com/australia.html), 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.


Thanks @vlad-otrocol, I've looked into the tutorials you've suggested, they were really helpful. They do have a lot of things I need, but I couldn't find everything I wanted.

Thanks @kevin-nielsen for your example, your way is much easier than the 'australia' example I've been working on from the RaphaelJS examples website. This is how far I've gotten: http://jsfiddle.net/k2GQj/.

I've integrated my example with yours and have this: http://jsfiddle.net/L3bHz/.

What I need to do is be able to click on an element, changing it's colour and then keep that colour state whilst allowing other elements to change colour on hover (like the 'Olympic Village Map').

As you can see from my example, at the moment I have a 'mouseout' event which changes each element colour to ONE colour. Would I need to create a 'mouseout' event for EACH element - isn't there a way I could revert the element colour back to it's original state after hover?

Also Kevin, in your example, how do you position the text? In the example I've been working on, DIVs are used and so the positioning can be changed with CSS.

Thanks again guys for the help - I'll work on this more and will report back with any advances!

2 Answers 2

0

For such a display, I would argue against using canvas in favor of using RaphaelJS-powered SVG, just like the Olympic Village map you're using as a model. It offers built-in event handling for hover and click as well as persistent state information, right out of the box, and remains reasonably performant with hundreds or thousands of objects. If you're at all conversant with javascript, it makes maps like the one you're describing extremely easy. Consider this little example fiddle, which demonstrates Raphael's js to power hovering and clicking for arbitrary shapes -- it took just minutes to write.

Do you have paths for the map you intend to build?

0

If you do decide to use the html canvas element for your project I would have a look at this: http://simonsarris.com/blog/510-making-html5-canvas-useful He has a really good series of tutorials on canvas.

Simon's tutorial contains pretty much everything you need. But you must remember a couple key elements:

  1. You must keep track of the coordinates and states of all objects on your canvas.
  2. Canvas has no such thing as shape/object event. You can only add events to the canvas element.
  3. If you want a mouse over a shape event you need to have a canvas mouseover event, get the coordinates for the cursor check against position of your shape and then you can decide whether the cursor is over shape or not.
  4. The general process for canvas is: event triggered-> recompute new canvas state, object positions and visibility, etc -> redraw everything

I would take a look at html5 canvas tutorials , too http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.