By 
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.
Wherever you click on this image it will link to the actual image URL:
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.
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 2:
Image Map example with the circle area 3:
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
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
About Post Author
