Apply Hover event in Raphael in a variety of ways

Question

When I put the hover event in the Raphael set, the effect is applied in every other way. Therefore, when I go through a path, it changes the filling of this single path, rather than filling the entire set at the same time.

For example, on this map, when you go through Canada with the mouse, the mainland changes color, but all the ice islands remain 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 use the Raphael animation method.

Any ideas on how I can solve this problem?

And here is another question containing this one.

Can someone clarify Raphael's documentation? (or know the place where someone has already done this)

Answer 1

This is an old problem when the event that you use to highlight does not apply to the object that you think is. In particular, this link.

At midnight, I got tired and I messed up your code. Here is what i did

Create an object to wrap your set of paths, and set up a mouseover event to reference a set of objects. The magic here is that using the link to the object variable, the event will be blocked for it, and everything will work.

So. This is an object. I put it at the beginning 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 drawSets function (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 did this only for Canada. In addition, I applied only the mouse. It should be trivial for you to use a linked mouse. You will also need an object for each country, which you probably want to keep.

Sorry, this is not clearer. As I said, it's late. If you want, I can send you a modified js file or paste it into dropbox, but this is probably contrary to the spirit of StackOverflow.

If you have problems with this, ask away and I will try to help.

Good luck.