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');
    }
);

它工作得很好。问题是我的图像地图中有很多区域。jQuery有没有办法从链接中获取href的最后一部分并将其放入动态工作变量中？

示例逻辑：

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

你可以使用这个：

$('area').hover(function(){
      $('img').attr('src', '/lib/img/layout/map-'+this.href.split('/').pop().slice(0,2) +'.gif');
}, function(){
      $('img').attr('src', '/lib/img/layout/map.gif');
});

this.href.split('/').pop().slice(0,2)采用悬停区域的 href 的最后一个标记的前 2 个字符。您还可以为您的区域提供更多标准化标识符（如“en”、“fr”），这样您就不必进行此提取。

于 2013-08-29T12:53:53.173 回答
0

使用dystroy的答案并回答您对仅获取href末尾的疑问，您可以使用字符串拆分：

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

[ 2]是得到地名的结果（在例子中：法国）

除了使用2之外，您还可以先存储在变量中，然后使用长度获取最后一项：

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

tmp[tmp.length-1];

它将始终打印 href 的最后一项。在这种情况下，“法国”

于 2013-08-29T13:06:27.583 回答