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:
|
1 2 3 4 5 6 7 8 |
<div> <img src="<?php echo $this->getViewFileUrl('Vendor_MyModule::images/my_mapped_image.png'); ?>" usemap="#image-map"> <map name="image-map"> <area alt="west-region" title="west-region" coords="199,41,16,26,35,368,9,568,485,579,496,449,499,423,486,376,479,315,359,307,372,237,334,233,350,52" shape="poly" class="region-btn" region="west"> <area alt="central-region" title="central-region" coords="348,47,332,238,374,246,359,315,482,321,499,434,491,473,602,475,594,436,638,423,625,349,643,344,675,310,678,185,577,60" shape="poly" class="region-btn" region="middle"> <area alt="east-region" title="east-region" coords="679,170,676,322,651,337,637,353,643,413,615,441,756,538,860,51,790,20,751,40" shape="poly" class="region-btn" region="east"> </map> </div> |
Remember to re-deploy static content files, and clean cache.
Happy Coding.