如何通过ImageMapster鼠标点击事件实现点击区域跳转详情页？

• 直接通过自定义属性绑定跳转地址
  在ImageMapster初始化配置里定义onClick回调，从点击的<area>标签的自定义属性（比如data-url）中获取详情页地址，执行页面跳转即可。

  示例代码：

  <img src="your-image.jpg" usemap="#target-map" />
  <map name="target-map">
      <area shape="rect" coords="0,0,120,120" data-url="/detail-1.html" />
      <area shape="circle" coords="250,250,60" data-url="/detail-2.html" />
  </map>
  
  <script>
  $('img').mapster({
      onClick: function(e) {
          const detailUrl = $(e.currentTarget).attr('data-url');
          if (detailUrl) {
              // 直接跳转当前页面，要新标签页打开就用window.open(detailUrl, '_blank')
              window.location.href = detailUrl;
          }
      }
  });
  </script>
  

• 用预定义数据映射跳转地址
  若不想在HTML里写跳转地址，可在JS中维护一个地址映射对象，通过区域的标识（比如name属性）匹配对应的详情页。

  示例代码：

  <img src="your-image.jpg" usemap="#target-map" />
  <map name="target-map">
      <area shape="rect" coords="0,0,120,120" name="area-one" />
      <area shape="circle" coords="250,250,60" name="area-two" />
  </map>
  
  <script>
  const areaUrlMap = {
      'area-one': '/detail-1.html',
      'area-two': '/detail-2.html'
  };
  
  $('img').mapster({
      mapKey: 'name', // 指定用area的name属性作为匹配标识
      onClick: function(e) {
          const detailUrl = areaUrlMap[e.data.key];
          if (detailUrl) {
              window.location.href = detailUrl;
          }
      }
  });
  </script>
  

• 配合选中视觉效果跳转
  如果需要先显示区域选中的视觉反馈再跳转，可添加小延迟确保选中状态生效：

  $('img').mapster({
      onClick: function(e) {
          // 切换当前区域的选中状态
          $(this).mapster('set', e.key, !e.selected);
          // 延迟200毫秒执行跳转，让选中动画完成
          setTimeout(() => {
              const detailUrl = $(e.currentTarget).attr('data-url');
              if (detailUrl) {
                  window.location.href = detailUrl;
              }
          }, 200);
      }
  });
  

内容的提问来源于stack exchange，提问作者RJPWilliams