Free Online HTML Image Mapping Tool - Hot Spots
I 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:
- You will need an image to make the image map for.
- 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?
- You will need to be connected to the internet.
|
|
How to make a free html image map online
- Go to http://www.image-map.com
- Enter the url of your image.
- Then press on the Start Mapping Your Image button. See
screenshot below.
- It will take a minute to upload your image. Then press on the
continue to next step link.
- Click on the button that says Rectangle.
- 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.
- Fill in the details of the link in the box below.
- You need to add the url of the link and the alt text.
- 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.
- To check the details of a link, simply mouse over the box
and the details will appear.
- Now Press on the get code button.
- Choose the HTML code tab as shown below.
- 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.
Basics of inserting links in HTML
POPULAR
Top HTML Layout Codes for
your Myspace Webpage
How to use the BBC code anchor and iurl tags to jump to an anchor in a post
Free Online HTML Image Mapping Tool - Hot Spots
How to find the url of an image or picture on the internet?
About the Author
Mitz wrote this article and others for
tips4pc.com Browse
for more articles that are written in an easy to understand
way. Also see our very popular
Video Tutorials page. Watching
a video is a very easy way to learn about computers.
I hope you've found this tutorial clear and easy to
understand. If you have more questions, feel free to visit our
FORUM and we'll be
happy to help.
Get the Tips4pc newsletter
| 
