Search Google Appliance


How do I create a clickable image map in Drupal and Drupal Syndication?

Some web content like maps and organizations charts can be made much more functional by making small "buttons" in the image that link elsewhere. Using these instructions you can create an Image Map, which allows an image like a jpegs to have specific areas defined as links. It doesn't affect the appearance of the image; the "buttons" are invisible but fully functional.

This technique will provide you with HTML code that you can paste into the HTML editor of Drupal. It also provides CSS code for your Style Sheets, if you are using them. This method works for both Drupal Content Management and Drupal Syndication.

See here for an example that we put in Syndication: 

Image Preparation

1) Create the image you want to map as a jpeg, png, or other web-friendly format. Ensure that it is no more than 640 pixels wide. Make sure that the image will have discrete areas for each link - you want to avoid any overlap of the link areas on the map.

2) Save the image to your local computer disk

3) Upload the image into Drupal Content Management or Drupal Syndication using the "Add Media" button.

Prepare Image Map Setup

4) Go to

5) From this page, click "Choose File" and navigate to the image you have saved to your local computer disk. Click "Okay" to upload the image.

6) Click "Start Mapping Your Image". 

7) You will see a screen displaying a disclaimer and a 10-second countdown timer. You should also see your image directly below the timer. If you image is not visible, it did not load correctly. Try again from Step 1 of this section.

8) Click "continue to next step". You should now see your image on the left and a toolbox on the right.


9) In the Base URL field under Advanced Tool Bar, type in the default URL you want to use (probably - don't worry, this isn't the URL that all your mapped links will go to, it just sets a default in case you forget to specify a different URL later on.

10) In Drupal CM or Syndication, navigate to the image you uploaded and click "View" to see it full size. Right click on the image and select "Copy image URL". Go back to the screen. In Advanced Tool Bar, under "Image URL", paste the URL you just copied. Click "Test" and ensure that your image appears in the pop-up window.

11) You can optionally adjust the "Show Text Links" and "Use Rollover Image" functions in the Advanced Tool Bar. Text Links create a second link navigation below the image. Rollover Images appear when you mouse over the link map.

Image Mapping

12) In the Image Map Tool Bar, select Rectangle or Custom Shape depending on what you want the outline of your first mapped link to look like. A dialog will pop up over your image. Adjust the shape and placement of your link map. Type in the URL link and the Title/Alt for the map. The Title/Alt is optional - its text will appear as a roll-over function and will appear as a Text Link below the image if you selected that option in the Advanced Tool Bar. Click "Save" to finish this link.

13) Repeat making links until you have finished.

Insert Code into Drupal

14) Click on "Get Your Code" to test and view your HTML code for the image map.

15) Click the "HTML Output" tab to test your image map. Click "HTML Code" to access your code.

16) Copy the HTML Code and paste it into your Drupal HTML editor to populate the page your are working on. You can tweak the code as needed, but ensure not to adjust the image map coordinates.

17) If you ever want to change where a specific image map "button" links to, you can edit the HTML code directly by changing the href.


Nice work, you now have an image map. Your web viewers will love you for it.