Apply Hover event in Raphael on a set of paths

Question

When I put a hover event on a raphael set, the efect is apply on every diffrent path. So, when I pass over the path, it changes the fill of that single path, not the fill of the whole set at the same time.

For example, in this map, when you pass through canada with the mouse, the mainland changes its color, but all the ice islands stays on the same color.

This is my code.

drawSets: function(){
    for (country in this.setsArr){
        var setset= R.set();
        var zone = this.setsArr[country];
        for (group in zone){
            var path = R.path(this.setsArr[country][group].path);

            setset.push(
                path
            );
        }

        var attri = this.options.attributes;
        setset.attr(attri);
        var x = this.setsArr[country].translate.x;
        var y = this.setsArr[country].translate.y;
        setset.translate(x,y);

        setset.hover(function(){
            this.animate({
                fill: '#000'
            }, 300);
        }, function(){
        this.animate({
            fill: attributes.fill
        }, 300);
    });

    }   
},

I'm using the Raphaels animate method.

Any ideas on how can I solve this problem?

And here is another question containing this one.

Can someone clarify Raphael's documentation? (or know a place in which someone already has done it)

Answer 1

This is the age old problem where the event you're using to highlight isn't referring to the object you think it is. Specifically the this reference.

It's midnight, I'm tired and I've messed with your code. Here's what I did

Create an object to wrap your set of paths, and setup the mouseover event to refer to the objects set. The magic here is that by using a reference to an object variable, the event will be locked to it and everything works.

So. Heres the object. I put it at the top of mapclasses.js

function setObj(country,myset)
{
    var that = this;
    that.country = country;
    that.myset = R.set();

    that.setupMouseover = function()
    {
        that.myset.mouseover(function(event){
            myvar = that;   
            // in the mouseover, we're referring to a object member that.myset
            // the value is locked into the anonymous object
            that.myset.attr({"fill":"#ffaa00"});
        });
    }

    that.addPath = function(newpath)
    {
       that.myset.push(newpath); 
    }

    return that;
}

Then in the function drawSets (line 80)

drawSets: function(){
    for (country in this.setsArr){
        var setset= R.set();
                    var holderObj = null;
                    //
                    // Create an object to hold all my paths
                    //
                    if (country == 'canada')
                    {
                       holderObj = setObj (country, setset);
                    }
        var zone = this.setsArr[country];
        for (group in zone){
            var path = R.path(this.setsArr[country][group].path);

            setset.push(path);
                            if (country == 'canada')
                            {
                               // add the path to the holder obj
                               holderObj.addPath(path);
                            }
        }

                    if (country == 'canada')
                    {
                       // once all paths for the object are loaded, create a mouseover
                       // event
                       holderObj.setupMouseover();
                    }

        var attri = this.options.attributes;
        setset.attr(attri);
        var x = this.setsArr[country].translate.x;
        var y = this.setsArr[country].translate.y;
        setset.translate(x,y);



    }   
}

Note: I've done this for Canada only. Also, I've only applied the mouseover. It should be trivial for you to apply the associated mouseout. Also you'll need an object for each country, which you'll probably want to store.

Sorry this isn't clearer. As I said, it's late. If you want, I can send you the modified js file, or stick it onto dropbox, but that probably goes against the spirit of StackOverflow.

If you have any problems with this, ask away and I'll try to help.

Best of luck.