How to add image maps in a blog

Image maps for

It is possible to add image maps in a blog even though the official Support Doc says otherwise.

What is an image map?

The best way to understand what an image map is is by viewing an example.

Please view the image above. Put the cursor on the text links (they are blue). You will be able to click on them and go to the links!

BUT it is an image. Put the cursor anywhere in the image (except on the blue text links), right-click and view image.

You see an image that looks just like the above image but the blue text links aren’t clickable. See below:

Official definitions: Image Map

In HTML a imagemap is made of the actual image, that is embedded with the -Tag. The image gets simultaneously the attibute usemap. The imagemap comprise

-Tag and in the detail of the

-tags, which defines the fields with the weblinks. These are similar to the -Tag defining which URL should be opened.

-From wikipedia

Definition and Usage

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.

The name attribute is required in the map element. This attribute is associated with the <img>’s usemap attribute and creates a relationship between the image and the map.

The map element contains a number of area elements, that defines the clickable areas in the image map.

Browser Support

Internet Explorer



Google Chrome


The <map> tag is supported in all major browsers.

-From w3schools

How to create an image map

Try the Google search for the how-to: How to create an image map

Try free online image mapping programmes:

Download a software that creates image maps

Check out this Google search: download softwares to create image maps

Or try these softwares:

So which one of these tools listed so far do I recommend?

None of them!


Because I haven’t really tested any of these tools. Sorry. Maybe you can test some and enlighten me!😀

Which image mapping tool do I use and why?
Well, I have my own favourite free online image mapping tool.
I use Kwout for all my image mapping needs at It is so easy and I have gotten so used to it that I didn’t even bother to test any other tool (now you know the reason!).

Click our bookmarklet on a web page you wish to quote, and the screenshot of the entire web page will be popped up. (The size of the screenshot can be selected from small, medium or large.) By dragging a mouse on the screenshot, select an area you wish to quote, and click the “Cut Out” button. Then the area you selected will be cut out as an image with an image map (hyperlinks). Finally, the embed code, which is used to post the image (with the image map) to your web site, will be displayed. In addition, you can post it directly to Twitter, Facebook, Tumblr, and so on.

– From Kwout

Kwout is super-easy. Try it for yourself!

Psst: a secret

I will soon be posting interesting tips on how to use Kwout’s image mapping tool creatively in a blog. If you want to be an early bird, subscribe to the rss feed of my wordpress tips.

5 thoughts on “How to add image maps in a blog

Comments are closed.