Free Online HTML Image Mapping Tool – Hot Spots

desperately needed to make an html image map for a banner I wanted to put on my Computerbasics Youtube channel. I had no idea how to do this so I decided to do a quick search on Google. That’s when I found this cool website that lets you generate html image map code online for free.

What is an image map or a hot spot?

An image map is a map that can pinpoint where a link is in an image. For example you might have a large banner on your website, however it might actually have links to several different places. The image map will contain the coordinates of the link. There coordinates will tell us where the link is situated on the image.

What you will need when using this HTML Image Mapping Tool:

1. You will need an image to make the image map for.
2. Your image should be stored on the internet and you need to know the url of the image. See How to find the url of an image or picture on the internet?
3. You will need to be connected to the internet.

How to make a free html image map online

1. Go to http://www.image-map.com
2. Enter the url of your image.
3. Then press on the Start Mapping Your Image button. See screenshot below.

4. It will take a minute to upload your image. Then press on the continue to next step link.

5. Click on the button that says Rectangle.

6. Now stretch the box with the markers around it to the size you want. You can also move it to any position on the image.

7. Fill in the details of the link in the box below.

8. You need to add the url of the link and the alt text.

9. Repeat this process but move the box into different positions each time. So for the next link, press the rectangle button and position the box, then fill in the details.

10. To check the details of a link, simply mouse over the box and the details will appear.

11. Now Press on the get code button.

12. Choose the HTML code tab as shown below.

13. Copy the code by selecting it.

Notes on making an image map:

• Do not navigate from the page or you will have to start again.
• To use this free version a back link will be placed in the image to this website.