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:


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.