What is image map & how to map the image in HTML ?
In this article, we will discuss an image map in HTML, along with understanding its implementation through the examples.
An Image Map refers to the clickable image having a clickable area that can be used to navigate to the various link to other web pages or the specific section of the same web page. The <map> tag can be used to define the image map & the clickable area inside the image can be defined with the <area> tag.
- name: It is used to associate the map with the image in which it is used.
Note: The name attribute in the map must have the same value as the image’s usemap attribute.
In order to map the image with different image areas, we need to specify the particular shape & associated coordinate points. Along with this, we also need to link the image using the <img> tag.
Example 1: In this example, the highlighted area is the mapped area, clicking on it will lead to the website. We can also use an area tag with an image map. It is used to direct the user to different links after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag.
Example 2: In this example, we are creating a map of three shapes. If we click on each shape, then an image map figure is displayed.