3

我正在使用此代码在网站上的悬停区域上显示弹出窗口：

HTML

<map id='_Image-Maps_1201306032036494' name='Image-Maps_1201306032036494'>
     <area shape='rect' coords='35,352,64,380' rel='one1'/>
</map>
<div id='one1' class='popBox'><div class='inside'><h4>Newspapers and mail piling up</h4><p><strong>Tip:</strong> When you go on vacation, call your local post office and newspaper provider to put your mail and newspaper delivery on hold. Or ask a reliable neighbor to pick it up for you.</p></div></div>

jQuery

$('area[rel="one1"]').hover(
   function(){
   $('#one1').show();
   },function(){
   $('#one1').hide();
});

但是，我有很多领域需要为此工作。区域 rel 始终与需要弹出的 div 上的 ID 相同。不是为每个单独的弹出窗口编写代码，有没有一种方法可以设置它，以便每当您将鼠标悬停在图像地图上的某个区域上时，它会显示与该区域具有相同 rel 的弹出窗口？

4

1 回答 1

0

这是未经测试的，但我建议：

$('area[rel]').hover(function(){
    // you may find that this.rel works, instead of
    // '$(this).attr('rel'), but I've not tried it.
    $('#' + $(this).attr('rel')).show();
}, function(){
    $('#' + $(this).attr('rel')).hide();
});

Roko 确认（在下面的评论中）使用this.rel作品，这比使用 jQuery 检索相同的值/属性更便宜；相反，它给出了：

$('area[rel]').hover(function(){
    $('#' + this.rel).show();
}, function(){
    $('#' + this.rel).hide();
});

参考：

于 2013-06-04T20:48:17.177 回答