Image mapping used to be very popular before but with time it has lost its charm, although we can use it today in just the right way and the right application. Image mapping is a very cool and interesting feature of HTML, with the help of the <map> tag we can divide the image into parts and each part will take you to a different page when you click on that.
Image mapping can be complicated for beginners, but with the right examples, we can understand it easily.
Let us follow some simple steps to create an image map
Step 1: Setting the size of our image.
In our case, this image is 275 x 183, we can increase or decrease the size in the HTML document if we want.
<!DOCTYPE html> <html> <head> <title>HTML Image Map </title> </head> <body> <img src="images.jpg" alt="image map example" usemap="#map_example"> </body> </html>
Step 2: let’s create a map to overlay our image.
<!DOCTYPE html> <html> <head> <title>HTML Image Map </title> </head> <body> <img src="images.jpg" alt="image map example" usemap="#map_example"> <map name="My-map"> </map> </body> </html>
Here is the map name is My_map, naming a map is important, we will need this in our next step.
Step 3: Defining the coordinates
Here we need to make three shapes, one polygon for our phone and another for the book, and the markers, to find the coordinates,
Here you go you will find the map coordinates successfully, copy the code. And paste in your file.