我正在使用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);
}
答案 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