Using AEM we can easily create a carousel with images or simple banner image, but it’s hard if we want to give extra information for a point on image. For authors to add hotspots on a particular position and to edit what information to show will be very complex and to determine the behaviour of placed hotspots on responsive devices is hard. We understand this could be a pain-point for business users. Therefore, for such requirements we developed an accelerator tool, which will help in placing hotspots on images with lot of ease. By using accelerator tool, we can add as many hotspots as needed, drag them to the particular position on image and save.
Goals and Objectives:
- Hotspots Accelerator tool is to add hotspots on images with lot of ease.
- To reduce authors work in placing hotspots on images and providing required information for each hotspot.
- Adding as many hotspots as needed, drag them wherever needed and save. After saving, author can edit hotspot and enter needed information to show upon clicking hotspot.
- Able to show hotspot with different icons like play icon to say hotspot contains video.
- Able to author and show content like title, description, links, videos that will show upon clicking hotspot.
- Able to delete hotspot whenever business wants to remove.
- Providing option for each hotspot whether to show on responsive devices (Tablets and Mobiles) or not. To maintain same position for hotspots even when opened in responsive devices.
How the tool works
Now let us go to AEM authoring instance and open page, which has our Banner Carousel with Hotspots component. After adding world map banner image, it will look like below.
By clicking on “Add Hotspot” which was displayed on top left corner of image, a “?” icon will be placed on image like below.
Now we can drag and place this “?” icon hotspot wherever needed. After dragging and placing, right click on the icon and click “Save”. By clicking “Save” user will get alert to confirm on changing hotspot position.
Now right click and click on “Edit” to enter the information that was required to show upon clicking this hotspot. There a feature to also customize the temporary icon. Here, we are using a ‘?’ for the temporary icon, but it can be customized specific to the requirement. The next screen shows the AEM dialog that will be populated when clicked on “Edit”.
As shown above we provided plus icon to display for hotspot and provided other details like image, title, description, links that will displayed upon clicking hotspot. Now the edited hotspot looks like below with plus icon
Now by clicking the plus icon hotspot users can see the extra information provided by authors by editing hotspot as shown above
Similarly, we can add as many hotspots as needed
If needed we can also delete the hotspots which are not relevant anymore. To delete we can right click on hotspot icon and click delete.
One important thing to note here the position of hotspots will not change even in responsive devices.