Tutorial - Image Mapping Lets You Add Many Links to One Picture

Image-map is pretty much similar to CSS Sprites. Image-mapping can be used to add multiple links to a single picture file. This will be useful in many areas of web designing.  You can just have a look at "FIND US" image on the right, as an example which we have in our page. Image-mapping is very easy to make and you need not be a tech savvy to make one for your own. There are excellent online tools available for creating the code for your custom Image mapped. Today, I'll show you how to easily create an image with multiple links using one such image mapping tool online. In this tutorial I will be using maschek.hu for creating the code for the custom image with multiple links.

Step 1:

Firstly create or find an image which suites your needs. In this tutorial I'm using an image for social networking icons.
find us on

Step 2:

Open this link and upload your image, or enter the url of the image or you can also try a sample image available in their library and then click on "accept".

image mapping tutorial

image mapping tutorial upload part

Step 3:

Now select output as "STANDARD IMAGEMAP" or CSS IMAGEMAP according to your choice. In this tutorial, I'm selecting Standard Imagemap. And you can select the mapping style as rectangle, since our image is in rectangle. You can simply ignore the other settings as it is not much necessary for our image type.
image mapping tutorial css sprites

Step 4:

Now that we have done editing the appropriate settings for the output, we can now start mapping the image. Point your cursor on to the image/picture and then click once on the edge on the first icon (Facebook) to be mapped, and then draw a rectangle which covers the entire Facebook icon and then click again to complete mapping. I hope the below image helps.
mapping images

Step 5:

Now that we have mapped to the appropriate dimension, we can now insert link in that area and select appropriate link target properties.
image mapping tutorial linking

Step 6:

Repeat the same steps for the other 2 images and then click on CODE at the end, to get the entire code and then copy the code.image mapping tutorial final code

Step 7:

Now we have the image-mapped code and lets proceed to the final step in this tutorial. The only thing left to do here is to link the imagemap id with the image code.

The above code is the code which we created using online image mapping tool and it will be having a unique imagemap id. We can now link the map id with the image code.

The final picture is the one below, just have a check at the links.
Find us on Facebook, Twitter, Linkedin, Youtune and Flickr

Here's the video tutorial

Test your code using this tool here

If you liked this tutorial, please leave your comments below.


  1. Hi

    Thanks for this, it's super helpful. I am a little lost on step 7 though. i have an image i uploaded (not from the internet) so how do i link this to my code?

    Would really appreciate your help (hopefully you still reply years later than the post!)


  2. I am trying to map the stadium for a NFL stadium. It has over 200 sections and I want to have a link to each section. However, I can not get any link over 237 to work. I move the links around and I can get the 240th link to work if I move it higher in the list of links. Is there a limit on hte number of links I can have? Thanks.

  3. This tutorial was incredibly helpful -- but I have run into a problem, and was wondering if you could help?

    I am creating an image map for a Facebook welcome page, and this has worked perfectly for it, but it is having problems when I use IE or Firefox -- the links do not work. It works with Safari and Chrome. Is there anyway I can easily fix this?? Please let me know!!

    • IE and Firefox doesn't support this feature. There is nothing that we can do than waiting them to include this feature in the next update.

  4. Wonderful article man, i really enjoyed doing this in that sitem but i was lost at the 7th step. when i get the code, what exactly i have to do ? where i have to link the image and how ? please re write the step 7, its not clear. Please help.

    • Yes the Step7 seems to be little confusing, thats for letting me know. The video tutorial should help all those who are stuck in the step 7.

Comments are closed.