Sunday, December 22, 2013

Create Clickable Image Maps with SharePoint Designer 2010

Image Maps in HTML defines 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/region/department, etc.

Lets see how to create an Image map using SharePoint designer 2010.

  • Open you SharePoint site in SharePoint Designer, Create a new HTML page.
  • Insert >> Picture >> Choose your image from SharePoint site for Image map.
  • Click on the picture. Now from the ribbon, Click on Format tab, Click on Hotspot Icon and choose the relevant Shape for your clickable region in the image.
    image map sharepoint content editor
  • 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 2010
  • 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
  • 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
  • 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! There are plenty of tools to create image maps.

You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.

Check out these SharePoint products:

No comments :

Post a Comment

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...