Create An Image Map For WordPress Using Gimp

Create an image map for WordPress using Gimp will show you how to create a simple image map using Gimp and then add the image map to WordPress.

Last Updated: May 21, 2023

Latest News: I have updated the wording in the document.

Even though the title is meant for WordPress, these instructions can be applied to any website using a CMS “Content Management System” or HTML.

I edited the whole tutorial and included the suggestions made by Dave Gustafson.

What You Need:

• https://www.gimp.org/downloads/

Gimp Tutorial List:

1. Gimp Image Editor Layout
2. How to make an image background transparent
3. Create a Banner using Gimp
4. Create round corners using Gimp
5. Create An Image Map For WordPress Using Gimp

Create An Image Map For WordPress Using Gimp

Step 1 ) This example shows you how to create an image with 3 objects.

• Circle
• Rectangle
• Oval

The following image shows you the objects with different colors. I added the colors to help you tell the difference.

Step 2 ) Next go to Filters -> Web -> Image Map to open the image map tool in Gimp. See image below.

Note: You must have an image opened up in Gimp for the tool to activate or else you will see the tool greyed out like in the image below.

Step 3 ) Next select Define circle oval area and Define rectangle area. The reason why I selected the oval and rectangle is because of the objects that I will be working with in this image. See both images below.

Step 3-a ) Select Define Circle/Oval area.

Step 3-b ) Select Define Rectangle area.

Step 4 ) Next select Define circle oval area for the blue circle in the image. Select Link type -> Web Site and type a URL and select Relative link, type an Alt text (Optional). Carry out the same steps for the oval and rectangle shape making sure you select the corresponding Define shape as mentioned above. See image below.

Step 4-a ) The following image shows you the 3 URL’s entered for each object above.

Step 5 ) Next select File -> Save As and type a name for the map file. See images below.

Step 5-a ) In this example I typed newmap.map.

Step 6 ) Next upload into your post or page the image created above in Step 1 ).

Note: A post or page mentioned in Step 6 ) above, is a term commonly used in WordPress. In your case, you might be working with a different platform i.e. Joomla, HTML web page or other.

Step 7 ) Next open the filename.map file you created above using a text editor like notepad in Windows. You can use what ever plain text editor you prefer.

Step 7-a ) If you don’t want to use a text editor you can always click on View -> Source…. and it will also display the code. See image below.

Remember: It is important that the name be exactly the same as the map name or else it will not work.

Copy and paste the code into WordPress post or page. Edit the code by adding usemap=”#map” or what ever name you prefer. You can also delete some of the code that Gimp adds to the source code.

The following two images show you the original code created by Gimp and the modified code copied into WordPress.

Step 7-b ) The following is Gimp’s original code.

Step 7-c ) The following image shows you the edited code copied into WordPress. You can see usermap=”#map” and < map name=”map”> also added.

Step 8 ) The following shows you the extra code used for this example.

Wrap the code in a HTML div tag. This will prevent WordPress or your theme from stripping the code or adding other html tags. It also allows you to control where you would like your image to appear in your webpage.

One more note to remember for the <div> tag use either id or class. For example <div id=”your id name”> or <div class=”your class name”>. If you want the link to open up in a new tab, add the following target=”_blank” to the HTML code below.

<div><img class=”” alt=”” src=”” usemap=”” width=”” height=”” />
<map name=””>
<area alt=”” coords=”” shape=”” href=”” target=”_blank” />
 </map>
</div>

====================

That is all you need to do to create an image map using Gimp and add it to WordPress or your HTML website.

I hope you learned something today.

Enjoy.