Question

我正在使用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>

谢谢，

添加小提琴的路径，Raphael js

0 个答案: