How to enable image maps for Adobe Experience Mana... - Adobe Experience League Community

How to enable image maps for Adobe Experience Manager(AEM) assets? | Launch Map in Adobe Experience Manager | AEM Community Blog Seeding

How to enable image maps for Adobe Experience Manager(AEM) assets? | Launch Map in Adobe Experience ... by Albin Issa

Abstract

An image map is an image with clickable areas. The areas are defined with one or more  tags. The HTML  tag defines an image map.
Image for post









The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

In this tutorial let us see how to enable image maps for AEM assets through the Image core component.
AEM enables the support to define the image map for assets along with Image Core components, the image maps can be defined through the Asset UI and the Image Core components enable the map configurations to output HTML
To enable the image map, edit the image through Asset UI

The Image core component can be used to author the image into the pages, the image core component(https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/wcm/components/image/v2/image/image.html) generates the image map

HTML based on the configuration enabled by the author.






This will generate the required HTML output and enable the clickable area based on the configuration that can direct the users to different URLs based on the area where they clicked, redirect the user to a specific URL based on where the user clicked.