我正在使用Raphael.js制作一张墨西哥地图,我试图弄清楚我的结果,但我不知道我应该在我的小提琴中添加地图的路径。我试图添加我已经拥有的Javascript上下的路径,但我没有做任何事情。
以下是我的内容:http://jsfiddle.net/jldc/GEPEU/64/
的Javascript
jQuery(function($) {
var r = Raphael('chaptersMap', 900, 600);
r.safari();
var _label = r.popup(50, 50, "").hide();
attributes = {
fill: '#002652',
stroke: '#939393',
'stroke-width': 1,
'stroke-linejoin': 'round'
};;
arr = new Array();
/* para cada path de nuestra fuente svg vamos a dibujar un path del tipo Raphael */
for (var correntPath in paths) {
var obj = r.path(paths[correntPath].path);
arr[obj.id] = correntPath;
obj.attr(attributes);
/* Al estar encima el mouse de nuestro correntPath, Cambiamos el color y se restablece cuando se deja */
obj.hover(function() {
this.animate({
fill: '#F79729',
stroke: '#8E8D90'
}, 300);
bbox = this.getBBox();
_label.attr({
text: paths[arr[this.id]].name
}).update(bbox.x, bbox.y + bbox.height / 2, bbox.width).toFront().show();
}, function() {
this.animate({
fill: attributes.fill,
stroke: attributes.stroke
}, 300);
_label.hide();
});
/* Accion cuando le damos click a alguna parte de nuestro mapa */
obj.click(function() {
location.href = paths[arr[this.id]].url;
});
} //fin For
});
CSS
#mapa_mexico {
border:8px solid #002652;
background: #F0F0F0;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f2f8', endColorstr='#d1f2f8',GradientType=0 );
width:650px;
height:442px;
margin:auto;
padding:2px 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
HTML
<div id="mapa_mexico">
<div id="chaptersMap">
</div>
</div>
谢谢,