Note this is the page I link to. I am placing an image on a page and then I am going to map it so that if I click on the I I will go to linkI and if I click on the M I go to linkM and so forth for each of the letters in the image. First I have to take the image to paint or another app to determine the coordinates that make up the I and the coordinates that make up the M. The important thing is that the image that gets checked in paint is exactly the same size as the image being mapped in html. If you use a different size image then the coordinates will not match up.

I right click on the image and then use Save Link as to save the image. I saved it as image.gif Note that I am recreating what I did so I am using this image. You can use any image that you want to work with.

I want to save in the directory/folder called mapping. Be sure you are saving the image and not the page. I had to try a few times till it came back with image.gif Now I am going to open image.gif in paint.

I searched for paint and I am using Paint desktop app. I have not worked with Paint 3D.

Open image.gif

I put the cursor here and at the bottom of the screen I see 4,20px

I positioned the cursor here and got 8,78px or there abouts. For my purposes exact does not matter.

When I originally did this I got coords o 2,19 and 8,75 for the two points on the I that were selected. When I just did it I 2,20 and 8,78 so I was close. Could have played and moved to get exact but… Anyway when you are shaping a rectangle which is what I was doing, you go for the top left corner and the bottom right corner so when I did it recently the 2,20 was the top left corner and the 8,78 was the bottom right corner. When I created the page originally the 2,19 was the top left corner and the 8,75 was the bottom right. So I now have the map of a rectangle that covers the shape of the letter I (sort of…). So on the next page we will look more at the code.

I set up the map with an id (I also used name) of the usemap name I set up the map with an id (I also used name) of the usemap name. Note there is no # here. Then for each area I want to map I gave the shape of rect, an alt, the coordinates as coords and then the href link that I want to go to. So href = “#i” links to the place where I have <a id=”i” and href #m links to the place I have <a id=”m”>. Note I decided to link within the page but I could have linked to a totally different page. For example I have seen maps of the United States and when you click on a particular state you link to that states home page. On the page I set up <img src and gave the name of the image. Note it is in the same directory/folder as the page. Then I gave an alt name and the use map with the #in front of the name.

Also from w3schools Note that with a circle you give the coordinates of the center and then you give the radius. With a polygon you give the coordinates for a beginning point of a line and the ending point of the line. Then you put another line using the ending point of the line as the starting point for a new line and code its ending point. Another reference that you might find useful: https://html.com/attributes/area-coords/