Description
Image Map shows an image of e.g. a product and its different spare parts or specifications.
An "Image Map" component contains an image on which "Hot Spots" are placed, which indicates more information to this specific area. By hovering over this area with the cursor, a "card" will open and provide further information about this use case. This card contains text, an optional link to the detail page of the shown product or product category.
There can be multiple "Image Map" components on a page.
Usage
The "Image Map" (Hot Spot) component can extend over the entire width of the page but can also be placed in a "Column Control" module.
The author can place several "Hot Spot" for all possible applications.
Demonstration Image Map
Header : Specification...
Text: About the specification for example... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Link text example (internal page)
Another "hot spot"
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Download a file (in this case a PDF-File)How to build an Image Map
Doubleclick on the Image Map component or choose the wrench tool at the component to get a setup modal for this module. Select the "Asset" tab in the modal and import a picture from the AEM DAM (picture on the left).
Once it's done, select the "Buttons" Tab, and please click on "Add" to add the first "Hot Spot" (picture on the left). A dialog window with parameters will open - see the next step below.
❶ Positioning Left (%): The positioning of the hot spot from the left. The positioning value will be entered in % of the picture width.
❷ Positioning Top (%): The positioning of the hot spot from the top. The positioning value will be entered in % of the picture height.
Note: For these two steps, it may be useful to use an image-editing program (such as Photoshop) to enter precise coordinates of the hot spot.
❸ Header: This is displayed as a header (see example above). Should be 10 words of about 50 characters long.
❹ Text: Will be as the text displayed (see an example above). Should be max. 40 words of about max. 280 characters long.
❺ Link Type: Choose depending on the link "internal download" or "internal page".
❻ Link Text: The text that is displayed as a link.
❼ Link: The URL to the target "internal download" or "internal page"
❽ Add: To add a new hot spot and repeat from step ❶ to ❼.