Enable Image Map on custom Image component extending Image core component.

[Kamal_Kishor]

Can we enable Image map option on Image component which is inheriting Image component (v2+) from core component?
We want to have an option to allow text overlay on coordinates specified using image map. Currently it allows hyperlinks but I can see it only in DAM/Assets and also it doesn't reflect on the pages where Image is being used.

AEM 6.5

thanks.

[SureshDhulipudi · Accepted solution]

please try like this

https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

== overlay dialog _cq_dialog/.content.xml -- add two inputs to get values ====

<items jcr:primaryType="nt:unstructured">
<coordinates
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Image Map Coordinates"
name="./imageMapCoordinates"/>
<textOverlay
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Overlay"
name="./textOverlay"/>
</items>

== Sling Model ===

@Model(adaptables = Resource.class)
public class CustomImageModel {

@inject
@ValueMapValue
private String imageMapCoordinates;

@inject
@ValueMapValue
private String textOverlay;

// getters and other methods...
}

==== HTL ===

<img src="${properties.fileReference}" usemap="#imagemap">
<map name="imagemap">
<sly data-sly-list.area="${properties.imageMapAreas}">
<area shape="rect" coords="${area.coordinates}" alt="${area.textOverlay}">
</sly>
</map>

[Kamal_Kishor]

thank you Suresh. I will try this.

Can you please confirm if inheritance does not work with cq_edit_configs and we have to create it manually wherever required in components inheriting from for eg Image.
@SureshDhulipudi 
thanks,