RaphaelJS

Chapter 3. Interaction

Chances are good that you aspire to create something beyond the kindergarten-level shapes we covered in the previous chapter. Don’t worry—Raphael handles complex shapes just fine (that was originally the subject of this chapter). But I wanted to skip straight to the interactive aspect of Raphael because it’s what makes the library so incredibly powerful. You can make as beautiful an image in Photoshop as you like, but you need Raphael to make it dance on demand.

You may recall that, at the end of the braille example in the previous chapter, we created an input box and a button to trigger the function that drew the dots. It looked like this:

<input id="message" style="width: 200px" value="Raphael is great"/>
<input id="clickme" type="button" value="braille-ify" />

<script>
    function make() {
        // make the braille
    };

    // click event to invoke function
    document.getElementById("clickme").onclick = make;
</script>

This is the most basic method for creating interactions in JavaScript. It consists of three parts: First is the event—in this case, a click of the mouse. Second is the object on the page we want to update when the event occurs, which in this case is the button. Last is the function that should fire when the even occurs in the context of the specified element. In this case, that function is make.

When we want to control our Raphael objects from the page using regular old HTML objects—buttons, dropdown menus, check boxes, radio buttons—then this is how we do it: ...