CODEWITHSUNDEEP
raphael
Jimbo Jones
Jimbo Jones

Reputation: 563

Raphael JS 2 Hover event

Hi I'm currently experimenting with Raphael JS 2 and have produced a nice circle of paths but after much searching cannot figure out how to implement a hover event on these paths to change the color...

http://jsfiddle.net/goosefat/HYmd2/

Upvotes: 0

Views: 9877

Answers (3)

Franky Yang
Franky Yang

Reputation: 221

Another nice method for you to handle this kind of problems, code here:

(Event handler defined like this)

var hoverIn = function (item) {
    return function (event) {
        self.hoverFlag = true;
        self.hintElementObj = {};
        self._drawHint(paper, event, item);
    };
};

(Event handler called like this）

paper.rect(x, y, item.rectWidth, item.rectHeight, round).attr({
    fill: fill,
    "stroke-width": 0
}).hover(hoverIn(item), hoverOut(item));

In fact, this is a JS trick that you could use in many situations. With it you could do many more interesting things.

Upvotes: 3

Marcelo Diniz
Marcelo Diniz

Reputation: 2499

This fiddle changes a bit the way you set the hover functions. If that's not what you want, please explain.

http://jsfiddle.net/vzkxC/1/

Raphael's documentation http://raphaeljs.com/reference.html#Element.hover says you can pass the context of the hoverIn and hoverOut functions as third and fourth parameters (in my example they're both cItem). These are the values of the this inside the callbacks.

Of course, you could move the hoverIn and hoverOut functions to an appropriate scope (out of the for loop)

Upvotes: 9

methodofaction
methodofaction

Reputation: 72405

Edit: Marcelo's example is more readabe/maintainable, use his.

You need a closure to achieve it:

(function (cItem) {
  cItem.hover(function(){
    cItem.attr({"stroke": "#E3E3E3"});
  },
  function(){
    cItem.attr({"stroke": "#000"});
});    
})(cItem)

http://jsfiddle.net/yxDap/

Upvotes: 4

Related Questions