How to map an image on different locations


If you need to locate where a user clicked over an image, in order to proceed with something according the placed clicked, you can use this following tool which is pretty useful:

image-map

In there, you can upload an image, and then with a wysiwyg tool, you can remark every needed map area, like this:

 

 

Afterwards, you can get the code clicking “show me the code!” button, and you will get something like this:

 

Bear in mind, that if you want to reuse this for Magento, you will need to upload you image (ie) in a custom module, in app/code/<Vendor>/<MyModule>/view/frontend/web/images/<my_mapped_image>.png.

And then, you can call the following snippet on app/code/<Vendor>/<MyModule>/view/frontend/templates/my_page.phtml:

 

Remember to re-deploy static content files, and clean cache.

 

Happy Coding.