To create a multiple links in a single we can use the image map in HTML. Html gives us two tags ‘<map>‘ and '<area>‘ that we can use with the '<img>' tag to get desired result. The '<map>' tag defines an image map, and the '<area>‘ tags define the clickable areas within the image.
See the below example to know how you can create a multiple image map:
<!DOCTYPE html>
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Click on the image:</h1>
<img src="image.jpg" alt="Image with Image Map" usemap="#my-map">
<map name="my-map">
<area shape="rect" coords="100,100,200,200" href="page1.html" alt="Area 1">
<area shape="circle" coords="300,150,50" href="page2.html" alt="Area 2">
<area shape="poly" coords="450,100,550,50,600,150,500,200" href="page3.html" alt="Area 3">
</map>
</body>
</html>
In this example:
The <img> tag displays an image (image.jpg) that you want to create the image map on. Make sure to replace it with the actual path and filename of your image.
The <map> tag defines the image map and gives it the name 'my-map‘. This name is then used in the usemap attribute of the <img> tag to link them together.
Each <area> tag defines a clickable area within the image. The 'shape' attribute specifies the shape of the area, and the 'coords' attribute defines the coordinates that determine the shape and position of the area.
The ‘href' attribute specifies the ‘URL‘ or destination that the area links to when clicked.
The 'alt‘ attribute provides alternative text for the area in case the image cannot be displayed.
In this example, there are three areas defined: a rectangular area, a circular area, and a polygonal area. You can add more '<area>‘ tags and adjust the coordinates according to your desired clickable areas within the image.
Remember to replace the 'href‘ values with the appropriate URLs or file paths for the pages you want to link to.
Further Read
I would like you to checkout few other article that covers in depth about setting up multiple links using imagemap.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map
https://www.w3.org/WAI/tutorials/images/imagemap/
Thank you for your time. Have a nice Day 🙂
Leave a Reply