与raphael js不同的悬停效果

时间:2014-04-20 23:03:25

标签: jquery hover raphael

我正在使用raphael插件js构建交互式地图。 http://jsfiddle.net/6CvXF/6

我已经设置了不同的循环来包装一些颜色路径。现在,我怎么能为这个不同的循环做不同的悬停颜色?

感谢您的建议

循环的两个例子:

//Abbigliamento
var rosa = {};
rosa["2"] = map.path("M 361.414,300.778 354.578,307.089 354.433,362.433 367.838,362.433 367.838,373.704     430.308,373.704 430.308,300.778    z");
rosa["4"] = map.path("M 326.896,373.593 326.896,363.609 347.391,363.609 347.391,306.804 341.781,301.02 264.493,301.02     264.493,337.675 269.733,342.916 269.64,373.593    z");
rosa["5"] = map.path("M240.633,300.778c0-0.394-41.99-0.197-63.07-0.074v11.323H160.7l0.036,61.726h75.203l-0.214-29.676    l4.909-5.434C240.633,338.643,240.633,301.303,240.633,300.778z");

for(var civico in rosa) {
    rosa[civico].attr(style);
}

//Cultura
var arancio = {};
arancio["3"] = map.path("M 354.578,307.089 361.181,300.544 373.575,300.544 373.575,309.04            354.578,309.039    z");
arancio["7"] = map.path("M 113.015,300.954 113.015,365.639 129.493,365.639 129.636,373.527 129.493,365.639     134.356,365.541 134.467,353.893 128.441,300.602    z");
arancio["8"] = map.path("M 93.731,300.954 113.015,300.954 113.015,365.765 129.493,365.765 129.493,373.668 93.978,373.668        z");
arancio["9"] = map.rect(445.229, 260.62, 39, 19);
arancio["10"] = map.rect(412.147, 260.62, 39, 19);

for(var civico in arancio) {
   arancio[civico].attr(style);
}

1 个答案:

答案 0 :(得分:0)

您可以在数组中设置样式,然后设置悬停样式函数...

var styles = [];
styles[2] = { fill: "red", stroke: "blue" };
styles[3] = { fill: "red", stroke: "blue" };
styles[4] = { fill: "blue", stroke: "red" };
styles[5] = { fill: "yellow", stroke: "green" };
styles[7] = { fill: "yellow", stroke: "green" };

function myStyleFunc( which ) {
    this.attr( styles[ which ] ); 
}

及更高版本(或在设置路径时在循环外部更早)

for(var civico in rosa) {
    rosa[civico].attr(style).hover( myStyleFunc.bind(rosa[civico], civico)        );
}

小提琴示例here