What is Image Mapping?

Image Mapping in layman’s term, it will would be explained as placing an image in your website through an html code wherein a certain image that you have uploaded is redirected to few links, yes, more than one link that is. As we are used to upload an image and put a URL link it to a ONE link image only but with image mapping you have the choice of coordinates to where a certain user may click and then redirected to those links in few seconds.

[via Wikipedia]

In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

Let me do a little presentation to elaborate more on what it is about through a simple way to understood it more.

First visit the page http://www.image-maps.com/ , this site offers a free imaging tool that is easy and so user friendly too. Instructions are not that hard to understand but for those who are first timers in this site, here’s what I got for you.

After you visit the site you will see this on screen.

After you browse a file or an image or paste the URL, you will see a START MAPPING orange button replacing the browse image button in this screenshot. Click the START MAPPING orange button and here's what to do next.

As you can see my image was uploaded and there is a BLUE colored link that says " Click here to continue".

Click that Blue link to continue. 

After clicking the blue link you will see that yellow colored notification message. As a windows user I right click my mouse and here's what I got.

Menus are showing after right clicking the mouse, in this menu I chose the 

"Create a Rectangle" menu and this is what I did.

Creating the Rectangle to a one side of my image leads me to another functions.

In this function you will see the map URL. This is where to paste the URL where you want the function to be redirected. In my sample, I chose the MONEY INVESTMENT word in rectangular shaped to be linked to a certain URL.

I then chose 3 rectangular shaped for my single image uploaded. 

3 Rectangle shapes for 3 different links.

 After making the 3 retangular shaped with 3 map urls this is what I got in my screen.

And this is my FINAL SAMPLE of an IMAGE MAPPING.

If you click on "Money Investment", "Networking" and "Franchising", it will redirect you to three different URLs. Photo is shrink to fit in to my blog but you may upload BIG images in Image Mapping. Does this tool helps you? For me, it is indeed a BIG help. Thanks to this site for they have it for FREE.  *Warning: If you uploaded your image. You MUST change the image source. All NON HOSTED images will be removed within 24 hours.