Full Width Image with Hot Spots

Layout Variant: C078

Content Type: ImageMap

Aspect Ratio: 

• 16:9 - Full Width Image used in the Image Map added as the Picture

Hot Zones can target:

• Collection
• Teaser (Including Page, Download, External Link, etc.)
• Video
• Picture

Expected Use:

An image component that uses hotspots to highlight, in situ, various products and solutions provided by Emerson. An interactive image component that uses hotspots to highlight, in situ, various products, solutions and benefits provided by Emerson. Can be featured on a variety of pages, including industry pages and platform landing pages, to bring attention to our product brands’ offerings in an eye-catching way.

Building the Component:

First, you will need to create the primary C078 component using an Image Map CoreMedia Document type. This component is to be dragged directly into the Main section of a Page. This component cannot be used in the Picture or Media section of a Page. If there is more than one hot spot, all hot spots are shown in a carousel on the page. If a user clicks on one hot spot, they are able to scroll through all others. For each hot spot, the "Area Target" will need to be created. Further instructions on each type of hot spot card is detailed in the Area Target Setup section below.

Start on the Content Tab:

1. Enter a Teaser Title which is display left aligned above the image as the title/description of the image. There is no use for Teaser Text or Teaser CTA.
2. Add the full width image you will be using in the Picture field.
3. Add an target item to the "Default Target" (typically a Teaser or Page). This is required and is the target for the default "Learn More" CTA that will appear at the bottom center of the image. This can be hidden by selecting the radio button for the "No Call-to-Action Button" for the Teaser.
4. The Overlay Configuration should include the following (select the check boxes):
   • Display Title/Name
   • Display Short Text
   • Display Picture
5. The Layout Variant must be set to "C078 Full Width Image with Hot Spots"

On the Hot Zones Tab:

1. To create a new hotspot
   • Click and drag your cursor over the area of the image you want the hot spot to reside. An "Area Target" will appear below the image. 
   • Drag/drop a destination for the Area Target (teaser, collection, video, image, external link, etc.). The Hot Spot will appear on the image. The vast majority of use cases should be to use a Teaser so you have full control over the content regardless of the target. i.e. even if you wish to use a Picture or a Download, it is best to use a Teaser to access that content.
   • You should add (although optional) "Alternate Text" that can be used for ADA needs to describe the action of the hot spot.
   • The "Inline Overlay" is not used for the C078 and should not be checked.
   • To add more hot spots, repeat the steps above.
2. To edit an existing hot spot
   • Move your cursor over an existing hot spot box and your arrow cursor will turn into a hand
   • Click to show the Area Target.
   • Edit or change as desired.

Area Target Setup: 

Text Only:

You can use a Teaser for this use case. The Teaser Target is the destination for the CTA. The Teaser Title is the main title text of the hot spot card. The Teaser Text is the body text of the hot spot card. "Learn More" is the default CTA label. You can override this by selecting a "Use Custom Call-to-Action Label" and entering a new CTA label. You can also select "No Call-to-Action Button" if you do not wish to have a CTA and just wish to provide more text information in the hot spot card.

Video:

Setting up a video will be similar to the description above for text only. The C078 uses the Teaser information NOT the "Details" of the Video. The "Video File URL" is the target for this hot spot card. The "Lear More" CTA will show at the bottom of the card by default as the "Use Default Call-to-Action Label" is usually selected. You should remove the CTA by selecting "No Call-to-Action Button" as this is not the designed functionality for a video.

Image:

This can be accomplished by adding an image to a Teaser or by using a Picture. If you use a Picture, you will need the Picture Title and Caption to take the place of the Teaser Title and Teaser Text. Your CTA target will have to be set as "Use Linked Call-to-Action Label" and add a target. The CTA label should be set on the target document to display correctly.

Collection:

The primary use case for a Collection is to provide product images and information. This creates a hot spot card with up to 8 Items. The Collection Teaser Title is used as the title of the hot spot card and is centered at the top of the card. There is no Teaser Text or Picture for the collection. That information is pulled from the Items you add to the Collection. You can drop Teasers, Pictures, or other teasable content into the Items. Each Item should have a Teaser Title, Teaser Text and Picture. A CTA target is optional for each item. These should be structured as describe elsewhere in these instructions for the C078.

Download:

Although not specifically called out as a use case, you can use a Download in the same way you use a Teaser, Picture, or Video above. You can have the Download as the Target of a Teaser or use directly from the Download.