0

hover現在、イメージ マップの効果を実装しようとしています。ホバー時に画像を交換します。代替画像では、マップのそのセクションが「ホバー」色で塗りつぶされています。

<map name="Map">
    <area id="france" shape="poly" coords="98,133,123,129,151,116,165,129,188,140,181,156,175,167,177,176,181,195,171,203,153,201,145,209,110,196,119,171,110,149,94,141" href="/page/france">
    <area id="england" shape="poly" coords="94,119,114,115,139,116,150,100,130,69,117,75,119,89,115,106" href="/page/england">
    <area id="wales" shape="poly" coords="118,87,112,107,99,100,109,86" href="/page/wales">
    // many more areas //
</map>

jQuery

$('#england').hover(
    function() {
        $('img').attr('src', '/lib/img/layout/map-en.gif');
    },
    function() {
        $('img').attr('src', '/lib/img/layout/map.gif');
    }
);

それは非常にうまく機能します。問題は、イメージ マップ内に多くの領域があることです。リンクからhrefの最後の部分を取得し、それを動的作業変数に入れるjQueryの方法はありますか?

ロジックの例:

var identifier = area/href/this

$(identifier).hover(
        function() {
            $('img').attr('src', '/lib/img/layout/map-'+identifier+'.gif');
        },
        function() {
            $('img').attr('src', '/lib/img/layout/map.gif');
        }
    );
4

2 に答える 2

0

dystroyの答えを使用して、文字列分割を使用できる href の末尾のみを取得することについての疑問に答えます。

$("#france").attr('href').split("/")[2]

[ 2]は、土地名である結果を取得することです (例: france )

2を使用する代わりに、最初に変数に格納してから、長さを使用して最後の項目を取得することもできます。

var tmp = $('#france').attr('href').split("/");

tmp[tmp.length-1];

href の最後の項目を常に出力します。この場合は「フランス」

于 2013-08-29T13:06:27.583 に答える