Learn Image Maps in HTML and SharePoint Online step by step

Learn Image Maps in HTML and SharePoint Online step by step

No comments

Loading

In this article, we will learn about what is Image Maps in HTML and SharePoint Online step by step.

What is Image Maps in HTML?

In simple words, an image map is a clickable area from a given image – we can create multiple clickable areas for a single image.

An Image without the Image Maps

Below is an example of an Image where the Image Map is not implemented – this is a normal image.

What is Image Maps in HTML Page
Learned about the concept of Image Maps

Wherever you click on this image it will link to the actual image URL:

Normal Image without the image map in html
Normal Image without the image map in HTML

Now, let’s look at the below image which is different than the previous one – basically, it is the same image but we can click on the different regions of the image to navigate to different locations.

An image with the Image Maps

The below image has been customized with the Image Maps, we can click on the different three areas to navigate to the different locations.

What is Image Maps in HTML Page

For this demo, let’s hover over the first, second, and third selected image area so we can see the different navigation for the same image.

Image Map example with the rectangle area 1:

Image Map example with the rectangle area 1
Image Map example with the rectangle area 1

Image Map example with the rectangle area 2:

Image Map example with the rectangle area 2
Image Map example with the rectangle area 2

Image Map example with the circle area 3:

Image Map example with the circle area
Image Map example with the circle area

In the above three examples, we have seen that if we click on the different areas of the images we can navigate to the different locations from the same image – this is the basic concept of Image Imap on the HTML page.

How Image Map is implemented in the HTML?

Below is the code for the above the image Maps:

<img src="https://global-sharepoint.com/wp-content/uploads/2022/06/What-is-Image-Maps-in-HTML-Page.jpg" usemap="#image-map" data-mce-src="https://global-sharepoint.com/wp-content/uploads/2022/06/What-is-Image-Maps-in-HTML-Page.jpg">
<map name="image-map">
<area alt="Submit Article in Global SharePoint Diary" coords="34,44,270,350" shape="rect" href="https://global-sharepoint.com/" target="_blank" data-mce-href="https://global-sharepoint.com/"> <area alt="Read Articles from Global SharePoint Diary" coords="290,192,333,250" shape="rect" href="https://global-sharepoint.com/tag/microsoft-technology-articles/" target="_blank" data-mce-href="https://global-sharepoint.com/tag/microsoft-technology-articles/">
<area alt="Contact to Global SharePoint Diary" coords="337,300,44" shape="circle" href="https://global-sharepoint.com/contactemail/" target="_blank" data-mce-href="https://global-sharepoint.com/contactemail/"> </map>

Here the challenge is to find the exact “coords” for the rectangle, circle, or any other shapes.

Supported shapes for the Image Map in HTML

  • rect – it defines a rectangular region of the selected image.
  • circle – it defines a circular region of the selected image.
  • poly – it defines a polygonal region of the selected image.
  • default – it defines the entire region of the selected image.

Now, let’s move on to the Image Map implementation in SharePoint Online.

Image Map in SharePoint Online

The way we saw the Image Map implementation using the HTML coding we can very quickly create and display the multiple-image maps inside the SharePoint Online Page using the Image Map web part.

In this, there are two steps:

  • Image Maps – Image Map builder
  • Image Map – Image Map web part to display the image.

Using the Image Maps builder we can create multiple hotspot areas along with the navigation for the given image, then we can add that customized image to SharePoint Page using the Image Map web part.

Demo – Image Maps in SharePoint Online Page

Configure Image Maps in SharePoint Online Page
Configure Image Maps in SharePoint Online Page

Note:

  • In the above image, we can see three hotspots in the three different areas – each hotspot will navigate to a different link, and implement it, just taking a few clicks (which takes a couple of minutes time), in a real-time SharePoint world we can leverage the use of layout pages with the Image Maps modern solution (Image Map web part).

How Image Maps App and Image Map web part works in SharePoint Online Page, refer to our detailed article – Use ANY Image to provide Dynamic Information with Links.

Summary: What we have learned from this article

Thus, in this article, we have learned the below with respect to Image Maps learning:

  • What is Image Maps in HTML?
  • What is Image Maps in SharePoint Online?
  • How to use the Image Map web part in SharePoint Online?
  • What is an image map used for?
  • How to create an image map with clickable regions?

See Also

Submit Article in Global SharePoint Diary Read Articles from Global SharePoint Diary Contact to Global SharePoint Diary

About Post Author

Do you have a better solution or question on this topic? Please leave a comment