Create an Image Map

With image maps, you can add clickable areas on an existing image to hyperlink to different destinations.

• Create Image Map
• Delete Image Map

NOTE: Image Maps will not work on a mobile screen because the image map coordinates will not scale down with the image as the browser window is resized.

Create Image Map

1. From the Experience Editor, navigate to the page you wish to create the image map on.
2. Launch the Rich Text Editor by selecting the any content and selecting the pencil icon from the toolbar.
3. Scroll to the image and right-click on it to view its properties.
   
   •  Add the image if not already on the page.
   • If the image is not in Sitecore yet, upload the image into the Media Library and insert it onto the page.
4. Select Image Map Editor.
5. Select the 'New Area' button to generate an area shape.
   • You can select either a rectangle or a circle shape.
     
6. Select the red arrow at the bottom right of the area shape to modify the size.
   
7. Move the area shape over the image area you wish to hyperlink. Continue to rescale the area box to the size you want it.
   
8. Enter in the image area properties.
   
   
   • URL: Sitecore page or website address 
   • Target dropdown: New Window
   • Alt Text: Brief description of the area
   • Title Text: Text that appears when hovering over the area
9. Select Update Area to set the area and coordinates.
10. Repeat steps #5 - #9 to add more areas.
11. Select the OK button.
12. Select the Accept button.
13. Save your changes.
14. Preview your page to test out the image map.
15. Check in the page.
16. Submit the page for Approval.

Your page now contains an image map with hyperlinks to other destinations.

Delete the Image Map

1. Right-click on the image.
2. Select Image Map Editor.
3. Select the 'Remove All' button to delete all area shapes and coordinates.
4. Select the OK button.
5. Remove the image if needed.
6. Select the Accept button.
7. Save your changes.