Create Interactive Image Maps Using GIMP

Interactive image maps allow you to link specific regions of a single image to different URLs, enabling intuitive web navigation through visual elements. GIMP includes a built-in Image Map filter that provides a graphical interface for defining clickable hotspots—such as rectangles, circles, and custom polygons—and automatically generates the required HTML code. This guide walks you through the step-by-step process of creating, configuring, and exporting an interactive image map using GIMP for your web development projects.

Step 1: Open Your Image in GIMP

Launch GIMP and open the image you plan to use for your website by going to File > Open. Ensure the image is at its final dimensions before proceeding, as changing the image size later will misalign the mapped coordinates.

Step 2: Open the Image Map Tool

Navigate to the top menu and select Filters > Web > Image Map. A dedicated Image Map editor window will appear, displaying your image alongside mapping tools.

Step 3: Draw Clickable Hotspots

Use the shape tools located on the left toolbar of the Image Map window to define the interactive areas:

  • Rectangle Tool: Ideal for standard buttons, cards, or grid-based elements.
  • Circle Tool: Best suited for circular icons, logos, or rounded objects.
  • Polygon Tool: Allows you to create custom, freeform shapes by clicking points around irregular objects.

Click and drag (or click multiple points for polygons) over the section of the image you want to make clickable.

Once an area is drawn, the Area Settings dialog will appear automatically (or double-click the shape in the list on the right):

  1. Link Type: Select Web Site (or other options such as email or FTP if needed).
  2. URL to link to: Enter the full web address (e.g., https://example.com/page).
  3. Target: Choose how the link opens, such as _blank for a new tab or _self for the same window.
  4. Comment / Alt Text: Enter descriptive text to ensure accessibility and provide tooltips.
  5. Click OK to save the hotspot settings.

Repeat this process for every interactive region you want on the image.

Step 5: Adjust Map Settings

To set a custom name for your HTML map element, go to Settings > Map Info... in the Image Map window. Set the Map Name to a descriptive, unique identifier (e.g., navigation_map).

Step 6: Export the HTML Code

  1. In the Image Map window, go to File > Save As....
  2. Choose a file name with the .map or .html extension and save it.
  3. Open the saved file in any text or code editor. You will find standard HTML markup containing the <map> and <area> tags with all mapped coordinates and URLs.

Step 7: Embed the Map into Your HTML Page

Copy the generated <map> block into your HTML document. Then, attach it to your image tag using the usemap attribute pointing to your map's name prefixed with a #:

<img src="your-image.jpg" alt="Navigation Map" usemap="#navigation_map">

<map name="navigation_map">
  <area shape="rect" coords="20,20,150,80" href="https://example.com/page1" alt="Page 1" target="_self">
  <area shape="circle" coords="250,100,50" href="https://example.com/page2" alt="Page 2" target="_blank">
</map>