Pinterest Stumbleupon Whatsapp
Ads by Google

I wrote an article about how to create an image for your website with clickable regions or hotspots using GIMP How To Create An Image Map Using GIMP How To Create An Image Map Using GIMP Read More . This kind of clickable image is called an image map.  Image maps have been around for a while but they are still widely used to give web designers flexibility.

In the comments someone asked me if this was possible to do using Paint.NET (can it be a Photoshop alternative 5 Free Alternatives to Photoshop You Should Try 5 Free Alternatives to Photoshop You Should Try Read More ?). For this reason I set out to not only install and use Paint.NET for the first time, but to figure out how to do image maps using it.


Yes, I did have to leave Ubuntu for a few minutes and boot into my Windows installation (I know there’s an Ubuntu version but I wasn’t sure if everything would work the same) but it was worth the change of pace.

The conclusion I came to was that yes, it is possible but you’ll need the help of a plugin.

Download & Install The Plugin

Plugins are fairly easy to implement in Paint.NET and it basically consists of downloading the files and putting them in the correct folder.  The plugin needed in order to make an image map is called “Create Image Map” and you can download it from this link.  The page is a bit messy so check out the screenshot below to find it easily.

how to create an image map

Ads by Google

You’ll be downloading a zip file containing the correct files.  Once downloaded, just put them into here: C/Program Files/Paint.NET/Effects

Now just restart Paint.NET and you should have it installed. Open the image and you should be all set.

Use The Image Map Editor To Get The Right Code

Open the image map editor: Effects -> Image Application -> Create Image Map

Drag (pretending you are seeing a box) and name each hotspot.

how to create an image map

Click OK when finished.  You will then get a pop-up with some code you will need to grab.

create an image map

Edit The Code & Get It Ready For Your Site

Open Notepad or a similar text editor and paste the code.  You’ll probably end up with all of the code on one line.  The easiest way is to separate the lines the way I did in the screenshot below.

Notice that I added a line of code at the top.  This line of code specifies where the image is located on the server (you did upload it right?) and the name of the map being used over the image.

You’ll also notice that I named the map.  In order to tie the image to the map, you will need to do that.  Also replace the “#” signs with URLs of the links you want inserted.

So yes, there is another way to make an image map.  It’s also possible to do by hand without the help of an image editing program but who has the time for that?

What do you use to make image maps?

  1. Lindsey Ashlyn
    July 31, 2010 at 9:10 pm

    I really want to download that!

  2. Aibek
    July 22, 2010 at 4:04 pm

    Tim, thanks for a nice tutorial. Handy!

    • timmyjohnboy
      July 22, 2010 at 9:14 pm

      Glad I could be of service:)

  3. Srivatsan Venkatesh
    July 17, 2010 at 12:43 pm

    Wow. Thanks guys! gimp just seemed a little too complicated for me, but a plugin works too. =D

    • timmyjohnboy
      July 19, 2010 at 5:27 pm

      No problem!

  4. Mayank007 J
    July 17, 2010 at 1:41 am

    cool.........

Leave a Reply

Your email address will not be published. Required fields are marked *