AEM CQ 56 - Using HTML 5 Smart Image, Image Map Tools for Text Hot Spots

Goal

Create Text Hotspots on Images configured using HTML 5 Smart Image, Image Map tools. Check the demo, Demo on Geometrixx, Package Install of component available for download

This extension uses jquery position() function. When you have too many components/pars, in Edit mode, the hotspots may not appear in expected place, so use wcmmode=disabled in the browser or Sidekick Preview mode to verify if the hotspots are showing up in the right place. Make sure you do thorough testing on various screens/browsers/surfaces before you activate any pages with this component

Create Hotspots

                                       

       


Display Hotspots with Text

                                 

               

Solution

1) In CRXDE Lite, copy /libs/foundation/components/image to /apps/imagehotspot

2) Set the componentGroup property of /apps/imagehotspot/image to My Components

3) Set the jcr:title of /apps/imagehotspot/image to Image Hotspot

4) Add the following css to /apps/imagehotspot/image/clientlibs/image.css used to style the hovering texts on image

.spotText{
    position: absolute;
    color: white;
    background: #222;
    padding: 5px;
    font-family: verdana;
    font-size: 10px;
    font-weight: bold;
    opacity:0.6;
}

5) Create node /apps/imagehotspot/image/clientlibs/js.txt of type nt:file and add the following

                          textspots.js

6) Create node /apps/imagehotspot/image/clientlibs/textspots.js of type nt:file and add the following logic

var TextSpots = {
    Spot: function(coords, title){
        coords = coords.split(",");

        //only circles are supported
        if(!coords || coords.length !== 3){
            return;
        }

        this.left = parseInt(coords[0]) + parseInt(coords[2]);
        this.top = parseInt(coords[1]) + parseInt(coords[2]);
        this.title = title;
    },

    getCircles: function(html){
        var obj = $.parseHTML(html);
        var spots = [];

        if(!obj || (obj.length == 0)){
            return;
        }

        $.each(obj[0].childNodes, $.proxy(function(i, v){
            spots.push(new this.Spot(v.coords, v.title));
        }, this));

        return spots;
    },

    addHotSpots: function(id, circles){
        var imageDiv = $("#" + id);
        $.each(circles, function(i, c){
            imageDiv.append($("<div>" + c.title + "</div>").addClass("spotText").css("top", c.top + "px").css("left", c.left + "px"));
        });
    }
};

7) Add the following code to /apps/imagehotspot/image/image.jsp

<%@include file="/libs/foundation/global.jsp" %>
<%@ page import="com.day.cq.wcm.foundation.Image,
                 java.io.PrintWriter" %>
<%@ page import="com.day.cq.wcm.foundation.ImageMap" %>

<%
    try {
        Resource res = null;

        if (currentNode.hasProperty("fileReference")) {
            res = resource;
        }

        if (res == null) {
%>
            Configure Image
<%
        } else {
            Image img = new Image(res);
            img.setItemName(Image.PN_REFERENCE, "fileReference");
            img.setSelector("img");

            String mapDefinition = properties.get(Image.PN_IMAGE_MAP, "");
            ImageMap imageMap = ImageMap.fromString(mapDefinition);

            String map = imageMap.draw("someid");
            String src = img.getSrc();

%>
        <div id="textOnImage">
            <img src='<%=src%>'/>
        </div>

        <script>
            $(function(){
                var circles = TextSpots.getCircles('<%=map%>');
                TextSpots.addHotSpots("textOnImage", circles);
            });
        </script>

<%
        }
    } catch (Exception e) {
        e.printStackTrace(new PrintWriter(out));
    }
%>