In html, you can specify image maps that have different clickable areas. You can do that server-side and client-side. When you do it server-side you need to use the ismap attribute to specify that the image is a server-side image map. For client-side image map, you have to use usemap and specify the name for the map.
Then you have to specify the map, with the map element. It has one attribute, name that specifies the map’s name. Inside the map element you need to use the area element to specify the different clickable areas.
area’s common attributes:
- href – the address for the clickable area
- alt – alternative text in case the image is not available
- shape – the shape to be created in the image map. It can be circle, poly, and rect.
- coords – specifies the coordinates for the shape.
- CSS – flexbox and align-self, order
- CSS – flexbox and align-content
- CSS – flexbox and align-items property