JS交互式地图：显示状态名称和创建链接

我想自定义此地图：http://jsfiddle.net/allankiezel/FJrNN/JS交互式地图：显示状态名称和创建链接

我什么不能够做的是：

显示名称或每个州的缩写鼠标悬停
链路的每个状态到一个单独的URL（而不是使其成为绿色上点击）

JS代码负责地图的行为：

var rsrGroups = [CA, OR, WA, NV, AZ, ID, UT, MT, WY, NM, CO, TX, NE, SD, ND, OK, KS, MN, IA, MO, AR, LA, WI, IL, MS, TN, KY, IN, AL, MI, FL, OH, GA, NC, VA, WV, SC, PA, MD, NJ, DE, VT, MA, CT, NH, ME, RI, NY, AK, HI]; 

for (var i = 0, len = rsrGroups.length; i <= len; i++) { 

var el = rsrGroups[i]; 

el.mouseover(function() { 
    this.toFront(); 
    this.attr({ 
     cursor: 'pointer', 
     fill: '#990000', 
     stroke: '#fff', 
     'stroke-width': '2' 
    }); 
    this.animate({ 
     scale: '1.2' 
    }, 200); 
}); 
el.mouseout(function() { 
    this.animate({ 
     scale: '1.05' 
    }, 200); 
    this.attr({ 
     fill: '#003366' 
    }); 
}); 
el.click(function() { 
    this.animate({ 
     fill: 'green' 
    }, 200); 
}); 

}

来源

2013-02-04 Alicia Fabbri

您必须将属性附加到第一

CA.attr({ 
    fill: '#003366', 
    id: 'CA', 
    name: 'CA', 
    href : 'http://www.california.com', 
    title : 'California' 
});

，如果你有这些属性可以在鼠标悬停功能访问他们的数据，现在你必须确定，你要显示的标签，你可以在容器中做到这一点，或者如果你想在地图上做到这一点，你必须在每个状态的属性中设置这个位置。

您必须在mouseover函数中显示状态属性并将其隐藏在mouseout函数中。

编辑：如果你想显示一个提示，你可以简单地设置属性标题编辑2：设定的属性href和冠军，但似乎参考interfers与.toFront（）

来源

2013-02-04 20:26:12 pfried

JS交互式地图：显示状态名称和创建链接

回答

相关问题