Create Clickable Image Maps with SharePoint Designer

Image Maps in HTML define clickable areas in images. You can specify a list of areas (or hot spots) that will be used as the links within an image. We can create an image map for any classifications, such as frequently accessed items/regions/departments, etc.

Let’s see how to create an Image map using SharePoint designer for SharePoint On-premises:

  1. Open your SharePoint site in SharePoint Designer, and create a new HTML page.
  2. Insert >> Picture >> Choose your image from SharePoint site for image map.
  3. Click on the picture. Now from the ribbon, Click on the Format tab, Click on the Hotspot Icon and choose the relevant Shape for your clickable region in the image.
    image map sharepoint content editor
  4. Select the clickable region by drawing the shape on the image. Once done, you’ll get the prompt to enter Link URL. 
    creating image map sharepoint designer 2013
  5. Once done with all clickable regions, Go to “Code View” of SharePoint designer and copy the code from <P> tag to <P> tag as in the below image
    create an image map using sharepoint designer
  6. Go to your SharePoint page, Edit and Insert a Content Editor Web Part. Insert the HTML code copied from SharePoint designer via “Edit HTML Source” 
    html image map sharepoint designer
  7. Save and Publish the changes. 

That’s all, We’ve created image map in SharePoint Designer! You can do it for any image by defining clickable areas.

create image map in sharepoint designer

BTW, SharePoint image maps can be created without SharePoint Designer as well! There are plenty of tools to create image maps.

Salaudeen Rajack

Salaudeen Rajack - Information Technology Expert with Two decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. Passionate about sharing the deep technical knowledge and experience to help others, through the real-world articles!

2 thoughts on “Create Clickable Image Maps with SharePoint Designer

  • Hi there, is there also a way to do this in Sharepoint 365 (online) version?

    Understood that Sharepoint Designer is not available for that version of Sharepoint anymore.
    And did not find a way so far to modify a page’s HTML in Sharepoint 365 (online) version.

    Did find a 3rd party app to get this done ‘image maps’ but is rather expensive and has many overhead features for the simple task I am looking to fix; I want to add multiple clickable hot spots over a picture that will navigate end user to a different (Sharepoint) web page.

    In advance many thanks!
    Patrick

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *