0

このマップをカスタマイズしようとしています: http://jsfiddle.net/allankiezel/FJrNN/

私ができないことは次のとおりです。

  1. マウスオーバーで各州の名前または略語を表示
  2. 各州を個別の 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);
});

}
4

1 に答える 1

1

最初に属性をデータに添付する必要があります

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

これらの属性がある場合は、mouseover 関数でそれらにアクセスできます。次に、タグを表示する場所を決定する必要があります。これはコンテナで行うことができます。マップ上で行う場合は、これを設定する必要があります。各状態の属性にも配置します。

マウスオーバー関数で状態のプロパティを表示し、マウスアウト関数で非表示にする必要があります。

edit : ツールチップを表示したい場合は、単純に属性 title を設定できます edit 2: プロパティを href と title に設定しますが、参照が .toFront() に干渉しているようです

于 2013-02-04T20:26:12.337 に答える