#adapt-contrib-hotgraphic
A contributed hot graphic component that enables a user to click on hot spots over an image and display a detailed popup that includes an image with text.
##Installation
First, be sure to install the Adapt Command Line Interface, then from the command line run:-
adapt install adapt-contrib-hotgraphic
This component can also be installed by adding the component to the adapt.json file before running adapt install:
"adapt-contrib-hotgraphic": "*"
###Usage
Once installed, the component can be used to display an image with clickable 'hot spot' elements. The location of these hot spots are defined within the content. When a hot spot is clicked, a pop-up window appears which displays an image and text.
Controls are provided to move between the next and previous hot spots via the pop-up window.
##Settings overview
For example JSON format, see example.json. A description of the core settings can be found at: Core model attributes
Further settings for this component are:
####_component
This value must be: hotgraphic
####_classes
You can use this setting to add custom classes to your template and LESS file.
####_layout
This defines the position of the component in the block. Values can be full, left or right.
####mobileBody
This is optional body text that will be shown when viewed on mobile.
####_graphic
The main hot graphic image is defined within this element. This element should contain only one value for src, alt and title.
####src
Enter a path to the image. Paths should be relative to the src folder, e.g.
course/en/images/gqcq-1-large.gif
####alt
A value for alternative text can be entered here.
####title
Title text can be entered here for the image.
####_items
Multiple items can be entered. Each item represents one hot spot for this component and contains values for title, body and _graphic.
####title
This is the title text for a hot spot popup.
####body
This is the main text for a hot spot popup.
####_graphic
Each hotspot can contain an image. Details for the image are entered within this setting.
####src
Enter a path to the image. Paths should be relative to the src folder, e.g.
course/en/images/gqcq-1-large.gif
####alt
A value for alternative text can be entered here.
####title
This setting is for the title attribute on the image.
####strapline
Enter text for a strapline. This will be displayed when viewport size changes to the smallest range and is shown as a title above the image.
####_top
Each hot spot must contain _top and _left coordinates to position them on the hot graphic.
Enter the number of pixels this hot spot should be from the top border of the main graphic.
####_left
Enter the number of pixels this hot spot should be from the left border of the main graphic.
##Limitations
When viewport size changes to the smallest range this component will behave like a narrative component. All information will be available but as a narrative rather than hot spots on a graphic.
##Browser spec
This component has been tested to the standard Adapt browser specification.