Image Map in HTML | Creating clickable areas on an image
An image map allows a user to hyperlink to many pages by clicking different parts of an image.Simply by using image map we create lists of coordinates relating to a specific area of the same image and give the hyperlink to a different location. By using this within a single image we give multiple links.This is the new features of HTML. It works like image sprites.A collection of images put into a single image and we can show like a small small images by selecting the part of the image and here we also give the separate link for every selected person.A web page with many images can take a long time to load and generates multiple server requests. We reduce the server request by using image sprites. by using imge sprites we save the bandwidth. We use single image, instead of using multiple images. With CSS, we can show just the part of the image we need. For more on image sprites Click here. Image sprites is one of the most usable features on the web development. we can save the bandwidth, reduce server request
How to create Image Map
There are three HTML elements used to create image maps:
- img: specifies the location of the image to be included in the map.
- map:is used to create the map of clickable areas.
- area:is used within the map element to define the clickable areas
- shapeThe shape attribute specify the shape of the cordinates(Ex: rect, circle, poly)
- coordsThe coords attribute specify the cor
- areaThe area tag an area inside an image-map
- mapThe map tag is used to define a client-side image-map. An image-map is an image with clickable areas.
- usemapThe usemap attribute specifies the map name with prefix ‘#’