Using JQuery with Raphael

views:

answers:

+3 Q:

Using JQuery with Raphael

I have created an image map with Raphael. I want the div containing the Raphael canvas to fade out using JQuery when one of the paths in the image map (path10 in the example below) is clicked. The code below does not work, but am I on the right track?

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var R = Raphael("canvas", 1050, 550);
        var attr = {
            fill: "#bbb",
            "fill-opacity": 1,
            stroke: "#222",
            "stroke-width": 0.3,
            "stroke-linejoin": "round"
        };
        path10 = R.path("m 221.63509,150.81487 97.24682,0 0,89.68452 -97.24682,0 0,-89.68452 z").attr(attr);
    };

    path10.node.setAttribute("id","barry");

    $(document).ready(function(){
        $("#barry").click(function(){
            $("#canvas").fadeOut();
        });
    });

</script>

<body>
    <div id="canvas"></div>
</body>

Thanks for any help!

Almost there... this works (tested on Firefox 3.6.8):

<body>
<script type="text/javascript" charset="utf-8">
    $("document").ready(function() {
        var R = Raphael("canvas", 1050, 550);
        var attr = {
            fill: "#bbb",
            "fill-opacity": 1,
            stroke: "#222",
            "stroke-width": 0.3,
            "stroke-linejoin": "round"
        };
        path10 = R.path("m 221.63509,150.81487 97.24682,0 0,89.68452 -97.24682,0 0,-89.68452 z").attr(attr);
        path10.node.setAttribute("id","barry");

        $("#barry").click(function(){
            $("#canvas").fadeOut();
        });     
    });

</script>

<div id="canvas"></div>
</body>

xiaohouzi79 2010-09-01 02:09:08

Smashing! Works perfectly, thank you.

Bazley 2010-09-01 11:22:49

Never ever touch node property. path10.click(will work just fine.

Dmitry Baranovskiy 2010-09-02 10:41:27

ansaurus

tags:

views:

answers:

Using JQuery with Raphael

related questions