javascript - Same hover function for multiple paths in Raphael -

so i've got canvas , paths:

var paper1 = raphael(10, 50, 960, 560);  var mapshape1 = paper1.path("m339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432l339.098,175.503z"); var mapshape2 = paper1.path("m548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575v306.876z"); var mapshape3 = paper1.path("m296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301s503.15,48.706,463.935,51.974s296.614,86.614,296.614,86.614z"); 

and style them this: (i believe improved, there way paths @ once???)

function style1(shape){   shape.attr({             "fill": "#33ccff",             "stroke": "000000",             "stroke-width": "5"         }); }  style1(mapshape1); style1(mapshape2); style1(mapshape3); 

but question how have single hover function work on paths, i've got this:

  mapshape1.hover(     function(){       this.animate({         "fill": "#ff3300"       }, 500);     },     function(){       this.animate({         "fill": "#33ccff"       }, 500)     }    ); 

but works 1 shape @ time, want

$(mapshape1, mapshape2, mapshape3).hover(... 

but doesn't work. missing?

as said lib3d, should use set. however, rather using foreach loop on set contents , apply attributes/functionality, shared attributes/functionality can added on set itself, apply on contents of set. more on later, first @ how can create sets.

set handling

there 2 ways create set , add elements it: explicit , implicit.

explicit

this means manage set yourself, , add elements set yourself`

var paper, shapea, shapeb, shapec, elementset;  paper = raphael(10, 50, 960, 560); elementset = paper.set();  shapea = paper.path("m339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432l339.098,175.503z"); shapeb = paper.path("m548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575v306.876z"); shapec = paper.path("m296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301s503.15,48.706,463.935,51.974s296.614,86.614,296.614,86.614z");  // add , c set, rectangle elementset.push(     shapea,     shapec,     paper.rect(10, 10, 10, 10, 2) ); 

this way in full control on enters set , not.

implicit

you have ability mark start , endpoints when drawing elements. element drawn between start , endpoint, added set.

var paper, shapa, shapeb, shapec, elementset;  paper = raphael(10, 50, 960, 560);  paper.setstart();  shapea = paper.path("m339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432l339.098,175.503z"); shapeb = paper.path("m548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575v306.876z"); shapec = paper.path("m296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301s503.15,48.706,463.935,51.974s296.614,86.614,296.614,86.614z");  paper.rect(10, 10, 10, 10, 2);  elementset = paper.setfinish(); 

the variable elementset contains shapes a, b , c rectangle.

explicit or implicit?

personally advice use explicit method. way have 100% control on enters set , not. also, find setstart() , setfinish() named backwards, we're "starting" "set", we're not "setting" "start". might obvious if intents, danger of ambiguous naming - next dev might not know , assume different.

more usages

for application created, had draw, remove, update , reposition complex groups of elements. in order achieve this, made heavy use of sets. bar fact sets allow apply attributes on every element in set, set allows use dto.

for instance following works:

var elementset = paper.set();  elementset.push(elema, elemb, elemc); elementset.myapp.somedto = {     property: value,     something: else }; 

i tend use myapp namespace, consistency , clarity. beauty of if somedto contains raphael elements, apply on set, not applied on elements in dto. makes usable pass around context, coordinates, etc should need to.

using sets

now benefit of using sets. let review usecase here: want apply attributes , hover arbitrary amount of paths.

if create set in explicit example above, end following:

var paper, elementset; paper = raphael(10, 50, 960, 560); elementset = paper.set(); elementset.push(     paper.path("m339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432l339.098,175.503z"),     paper.path("m548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575v306.876z"),     paper.path("m296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301s503.15,48.706,463.935,51.974s296.614,86.614,296.614,86.614z"), ); 

now apply styling on set:

elementset.attr({     fill: '#33ccff',     stroke: '#000000',     'stroke-width': 5 }); 

and add hover:

elementset.hover(     function(){         this.animate({             "fill": "#ff3300"         }, 500);     },     function(){         this.animate({             "fill": "#33ccff"         }, 500)     } ); 

sets support chaining, elements do:

elementset.push(     /* elements */ ).attr({     /* attributes */ }).hover(     /* hover fn's ); 

to view final result, there's a fiddle here

expanded hover functionality

should want apply onhover highlight elements, apply attributes on set again:

onmouseover: function () {     elementset.animate({         fill: '#ff3300'     }, 500); }; onmouseout: function () {     elementset.animate({         fill: '#33ccff'     }, 500); };  elementset.hover(onmouseover, onmouseout); 

a fiddle view can found here

using jquery

in order able bind hover functionality through jquery, 1 must access nodes of elements. elements not dom nodes, rather raphael objects. through using element.node 1 can use jquery on node add behaviour. personal experience works decent, never ever want modify node through jquery can lead unexpected behavior. raphael provides functionality need, using jquery shouldn't needed.