How to realize Custom Link of Commodity Picture

The

merchandise page is shown in the figure below. The background can set the url, of different areas of the picture. Have you ever done it?
clipboard.png
the front-end code is the a link above the underlying image, like this, it is backstage, because each brand has similar, solve 

<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, "product", "3546477-660764210","");" mst-mars="product|3546477|660764210" mars_exposure_sead="special_widget_expose" mars_exposure_module="mst|products|3546477|7_1|1|660764210"></a></div>
Javascript
Aug.16,2021

isn't the code you posted a solution? Do I get it wrong?

the simplest mouse draws a rectangle on the picture, that is, the two points of monitoring mousedown/mousemove/mouseup, mousedown,mouseup are the areas where you want to add a link to the picture, and then add a link address to an input box.

1. Function evaluation: this is a necessary function of commodity management systems on many e-commerce platforms.
2, functional ideas: set a button to create a clickable area function, the button is mainly to create a transparent a tag, a tag is set to click four vertices to zoom in and out, long press and drag.
the specific code of PS: cannot be written in a minute or two. For such a requirement, the company will usually schedule 0.551 person-days for development.

Previous: The problem of openvpn accessing internal elastic ip

Next: I don't quite understand the use of git branches.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu