Question

我有一张包含多张图片地图的图片。如果单击一个链接/区域，我希望图像更改为另一个图像。因此，例如，如果点击ID="02"，我会将图片来源更改为02.png，依此类推......

我对area形状的标记是：

<img src="01.jpg" usemap="#Map" alt="">


    <map name="Map">
        <area shape="rect"  id="02" coords="7,6,191,375" href="#" alt="">
    </map>

如何使用jquery / javascript实现此目的？

Answer 1

$(document).ready(function() {
   $("area").click(function() {
      var areaId = $(this).attr("id");
      $("img").attr("src", "" + areaId + ".png");
   });

});

编辑：在这里工作小提琴：jsfiddle.net/940yj9vr/1

Answer 2

      $('area').on('click', function() {
        if(this.id<10){
          url = (this.id*1);
          url ='0'+ url;
        }else{
          url = (this.id*1); 
        }
       // url=this.id*1;
        console.log(url)
          $("img").attr("src", url + ".png");
      });

希望这适合你

点击HTML区域更改图像

2 个答案: