使用插件jquery mapify
<img id="Map-1" src="img_71.jpg" width="1050px" height="802px" style="max-width:458px;max-height:350px;" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="269, 209, 274, 495, 150, 498, 148, 747, 33, 748, 31, 227, 158, 229, 161, 209" id="kv5" style="cursor:pointer;" alt="5" data-toggle="modal" data-target="#myModal" />
<area shape="poly" coords="520, 503, 520, 748, 396, 748, 395, 778, 155, 780, 154, 504" id="kv4" style="cursor:pointer;" alt="4" data-toggle="modal" data-target="#myModal" />
<area shape="poly" coords="768, 503, 768, 797, 649, 797, 650, 749, 525, 751, 526, 502" id="kv3" style="cursor:pointer;" alt="3" title="1-комнатная квартира" data-toggle="modal" data-target="#myModal" />
<area shape="poly" coords="772, 283, 773, 796, 1041, 796, 1040, 611, 994, 611, 997, 287" id="kv2" style="cursor:pointer;" alt="2" data-toggle="modal" data-target="#myModal" />
<area shape="poly" coords="495, 58, 496, 171, 527, 172, 525, 342, 690, 343, 690, 281, 1021, 281, 1020, 9, 894, 9, 892, 52, 540, 49, 542, 56" id="kv1" style="cursor:pointer;" data-toggle="modal" data-target="#myModal" alt="1" />
$("img#Map-1").mapify({
popOver: {
content: function(zone){
return "<strong>"+zone.attr("data-title")+"</strong>";
},
delay: 0.7,
margin: "15px",
height: "80px",
width: "160px"
}
});
按下按钮时,我们需要选择多个对象。我只突出了列表中的最后一个。
$('#button').on('click', function() {
$("#kv5").mouseenter();
$("#kv2").mouseenter();
$("#kv1").mouseenter();
});
是否有其他方法可以按ID选择多个项目?