javascript - Viewing text on mouse over in Raphael.js -
i have rapahel circles , need view text on them when hover on them. here code:
var text = r.text(x, y, "some text"); r.circle(x, y, 10).attr({"fill-opacity":0.8, fill:color, stroke: "white"}) .mouseover(function () { this.animate({"fill-opacity": 1, 'transform':"s2 2"}, 500);} txt.show(); }) .mouseout(function () { this.animate({"fill-opacity": 0.8, 'transform':"s0.5 0.5"}, 500);} txt.hide(); });
x , y calculated in loop makes several circles on screen. problem text show last 1 , position fixed. how can code work , bind single text each circle?
try this
var circle = r.circle(x, y, 10).attr({"fill-opacity":0.8, fill:color, stroke: "white"}); circle.txt = r.text(circle.attr('x'), circle.attr('y'), "some text"); circle.mouseover(function () { this.animate({"fill-opacity": 1, 'transform':"s2 2"}, 500);} this.txt.show(); }) .mouseout(function () { this.animate({"fill-opacity": 0.8, 'transform':"s0.5 0.5"}, 500);} this.txt.hide(); });
Comments
Post a Comment