目前我正在尝试为图片地图实施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');
}
);
答案 0 :(得分: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”),这样您就不必进行此提取。
答案 1 :(得分:0)
使用 dystroy 的答案并回答您对仅获取href结尾的疑问,您可以使用字符串拆分:
$("#france").attr('href').split("/")[2]
[2] 是获取作为地名的结果(在示例中: france )
您可以先存储一个变量,然后使用长度获取最后一项,而不是使用 2 :
var tmp = $('#france').attr('href').split("/");
tmp[tmp.length-1];
它将始终打印href的最后一项。在这种情况下,“法国”