New York University Skip to Content Skip to Search Skip to Navigation Skip to Sub Navigation

Link (Map) an Image

After adding in your image to the desired location on the page, you may create a mapping to a targeted page through a link embedded within the image.

  1. Double click the component icon.
  2. Click on the Image tab.
  3. In the lower left-hand corner, click on the Map button.
  4. A selection of image map tools will be viewable in a menu above the image.
  5. In the Image map tools menu, click the button that corresponds to the type of shape you wish to use to create the selection area for the link mapping.
  6. Click inside the image to select the boundary area that will control the link mapping.
  7. Click the down arrow next to the HREF option to bring up the "Select Path" navigator window.
  8. The "Select Path" window resembles the Authoring Environment Site Admin console's left-hand Navigation pane; the hierarchy of available content is visible within the expandable left-hand side tree. To find the content you wish to reference, navigate through the tree by clicking on the plus signs next to the various pages. Click OK.

    Or, if you wish to refer to a link outside of the CMS, type the URL into the HREF option, beginning with http:// .

  9. By default, the mapped image will open up the targeted link in a new window. Therefore, you may leave the Target option blank.
  10. When finished, press the OK button to save your changes.
  11. Click the magnifying glass icon in the Sidekick to open the page in Preview mode to ensure that the mapping works as expected from the end-user's perspective.

Editing a Mapped Image

  1. Double-click the component.
  2. Click on the Image tab.
  3. In the lower left-hand corner, click on the Map button.
  4. Click the Edit button to modify the area. Click the image to grab the outer border of the shape you selected and use the corners to minimize or maximize the size of the boundary area.
  5. When finished, press the OK button to save your changes and see them within the page.
  6. Click the magnifying glass icon in the Sidekick to open the page in Preview mode to ensure that all additions are as expected from the end-user's perspective.

Removing a Mapped Image

  1. Double-click the component.
  2. Click on the Image tab.
  3. In the lower left-hand corner, click on the Map button.
  4. Click the Edit button.
  5. Click the image so that the mapping border turns red.
  6. Click the Delete button.
  7. When finished, press the OK button to save.
  8. Click the magnifying glass icon in the Sidekick to open the page in Preview mode to ensure that all deletions are as expected from the end-user's perspective.

Examples

Component Tutorial: Image Map

In order to map an image, you need to select your image from the asset finder and drag it into the component. Once there you can highlight the entire image or sections you want to link.  Try not to make the image map too complicated.

NYU Footer