如何实现商品图片自定义链接

Question

商品页面如下图，后台可以设置图片不同区域的跳转的url，大家有没有做过，求思路

前端代码是底层图片上面a链接，像这种一样是后台的，因为每个品牌都有类似的，求解

<div class="plugin-pingou">
    <img src="//h2.appsimg.com/b.appsimg.com/upload/mst/2018/10/10/161/split_09965280e1e09259b6e92a453a1c1bfb7.jpg!75.webp"> 
     <a href="javascript:;" data-product-id="660764210" data-brand-id="" data-product-undefined="0" class="link  " style="position:absolute;left:6.55431%;top:12.82051%; width:86.70412%; height:49.50690%;" onclick="VIP.router(this, &quot;product&quot;, &quot;3546477-660764210&quot;,&quot;&quot;);" mst-mars="product|3546477|660764210" mars_exposure_sead="special_widget_expose" mars_exposure_module="mst|products|3546477|7_1|1|660764210"></a></div>

Answer 1

你贴的代码不是解决方案吗？我理解错了？

Answer 2

最简单的鼠标在图片上画矩形,也就是监听mousedown/mousemove/mouseup, mousedown,mouseup的两点就是图片上要添加链接的一个区域，然后给个输入框加链接地址就可以了。

Answer 3

1、功能评价：这是很多电商平台的商品管理系统的必要功能。
2、功能思路：设置一个创建可点击区域功能的按钮，该按钮主要是创建一个透明a标签，a标签设置成可点击四个顶点放大缩小，长按可拖动。
PS：具体代码实现一两分钟是写不出来的，这样的需求，公司一般会排期0.5~1人日开发。