I wrote an article about how to create an image for your website with clickable regions or hotspots using GIMP. 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?). 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.

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.

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

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?