Class s7sdk.image.HotSpotEffect

The HotSpotEffect component is an effects component designed to add functionality to the ZoomView and SpinView components. The HotSpotEffect uses zoom target data retrieved from Adobe Image Serving to highlight certain areas of the image which associated with zoom target areas.

The hotspots are only visible when the image is in the initial zoom state also called the reset state. When the user touches a particular hotspot, the icon is highlighted according to CSS settings. Tapping on the hotspot zooms the image into the region defined by the zoom target represented by the hotspot.

Defining Appearance using CSS

You can define the appearance of the HotSpotEffect component by using CSS rules. All Adobe Experience Viewers HTML5 SDK components use class selectors for styling. You can style the body of the HotSpotEffect component by using the .s7hotspoteffect class selector. The styles associated with this class selector are applied to all instances of the HotSpotEffect component. Style particular instances by prefixing the class rule with the instance #ID. For example, styling rules for #myComp.s7hotspoteffect are applied only to the particular HotSpotEffect instance. For more information on component styling see the Adobe Experience Viewers HTML5 SDK User Guide and the examples in this document.

CSS Class	Attribute Selector	Description
`.s7hotspoteffect`	(None)	Represents the main element of the `HotSpotEffect` component.
`.s7hotspotoverlay`	`state=[default\|active]`	Defines the appearance of the zoom target overlays.

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.image.HotSpotEffect(containerId, settings, compId)

Method Summary
Method Attributes	Method Name and Description
	setCSS(classname, property, value) Sets a particular CSS class and property on a component

Class Detail

s7sdk.image.HotSpotEffect(containerId, settings, compId)

Example Code
This example demonstrates how to use the HotSpotEffect component in a simple viewer. In this example a Container object,
a ZoomView object, and a HotSpotEffect object are created. The HotSpotEffect places 2 clickable circle buttons on the image
displayed in the ZoomView. When a user clicks a hotspot, the ZoomView zooms the image in on that area. Notice that the
HotSpotEffect object is attached to the ZoomView object via an argument in the HotSpotEffect's constructor. 

The code below does the following:

The Adobe Experience Viewers HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
The s7sdk.Util.init() method is called to initialize the SDK.
A ParameterManager object is created to handle component modifiers for the viewer.
An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example.
An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Adobe Experience Viewers HTML5 SDK is loaded and ready.
Finally, the init() method is called on the ParameterManager object to start the viewer.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>HotSpotEffect Component</title>

        <!-- To run this example locally you need to replace this with an absolute SDK path.
            For more information check the Adobe Experience Viewers HTML5 SDK User Guide or the examples
            included in the package.
        -->
        <script language="javascript" type="text/javascript"
                src="../js/s7sdk/utils/Utils.js"></script>
        <script language="javascript" type="text/javascript">
            s7sdk.Util.lib.include('s7sdk.image.ZoomView');
            s7sdk.Util.lib.include('s7sdk.image.HotSpotEffect');
            s7sdk.Util.lib.include('s7sdk.common.Container');
        </script>

        <style type="text/css" media="screen">
            html,body {
                width: 100%;
                height: 100%;
            }
            body {
                padding: 0px;
                margin: 0px;
                font-size: 12px;
                background: #FFFFFF;
                overflow: hidden;
            }	
        </style>    
	    
    </head>
    <body>

        <script language="JavaScript" type="text/javascript">
            var params, zoomView, container, hotSpotEffect;

             // Initialize the SDK
            s7sdk.Util.init();

            // Create ParameterManager instance to handles modifiers		
            params = new s7sdk.ParameterManager();

            // Define the function that initializes the viewer
            function initViewer(){
                // Set hardcoded modifiers (not required when values are specified on the url)
                params.push("serverurl", "https://s7d1.scene7.com/is/image");
                params.push("asset", "Scene7SharedAssets/Backpack_B");

                // Create the Container component object
                container = new s7sdk.common.Container(null, params, "s7container");

                // Create the ZoomView component object
                zoomView = new s7sdk.image.ZoomView(container, params, "zoomView");
				zoomView.resize(container.getWidth(),container.getHeight());

                // Create the HotSpotEffect component object
                hotSpotEffect = new s7sdk.image.HotSpotEffect("zoomView", params, "hotSpotEffect");
            }

            // The ParameterManager will dispatch SDK_READY when all modifiers have been processed
            // and it is safe to initialize the viewer		
            params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false);

            // Now it is safe to process the modifiers, the callbacks have been defined
            // this will trigger the SDK_READY event
            params.init();
        </script>

    </body>
</html>

Default styles for HotSpotEffect:

.s7hotspoteffect .s7hotspotoverlay {
	height: 50px;
	width: 50px;	
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(images/sdk/hotspots_overlay_icon.png);
	cursor: pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.s7hotspoteffect .s7hotspotoverlay[state="default"] {
	opacity: 0.6;
}
.s7hotspoteffect .s7hotspotoverlay[state="active"] {
	opacity: 1;
}

Parameters:
{String} containerId: Does not apply to HotSpotEffect.
{s7sdk.ParameterManager} settings: A parameter manager object representing the desired configuration.
{String} compId: Does not apply to HotSpotEffect.

See:: s7sdk.TargetDesc

Method Detail

setCSS(classname, property, value)

Sets a particular CSS class and property on a component

Parameters:
{String} classname: The CSS classname to use for this style. i.e. .s7hotspoteffect
{String} property: The CSS property that is being set. i.e. background-position
{String} value: The CSS property value being set. i.e. center

Namespaces

Classes in s7sdk.image

Class s7sdk.image.HotSpotEffect