Metuchen High School: GIMP

 

7. Image Maps

8 points

An image map is an image that has clickable sections.  Each section is associated with a link.  If the user clicks on one section of an image map, it will take them to a given destination.  If the user clicks on another section, it will take them to a different destination.


Example

This is an exercise intended to show you how to make an image map.  The exercise you are asked to do is discussed below.

I'll use this image, which is intended for the Metuchen High School website:

Begin by creating a blank background. Add at least 4 small images to it. To do this: open each image in GIMP. Find the image in the "Windows" menu bar. Use Image > Scale Image to resize the image to the desired size. Copy the image and paste it onto the background. Each image will be associated with a different link. When you've completed adding images to the background, save the project file and export an image from the project (keyboard shortcut: CTRL-E), either a JPG or PNG.

Choose Filters > Web > Image Map.  To associate a link with a circular image, click on the circle to the left of the Image Map dialog.  Click in the center of the clock and drag outwards.  When the circle is the desired size, click the mouse.  In the Settings dialog, under "URL to activate when this area is clicked:" enter the URL to associate with clicking on the clock.  Choose OK.

To associate a link with a rectangular image, click on the rectangle icon.  Click on the upper-left hand corner of the rectangle and drag down and to the right.  When the rectangle is the desired size, click the mouse.  In the Settings dialog, under "URL to activate when this area is clicked:" enter the URL to associate with clicking on the rectangle.  Choose OK.

Do File > Save As and rename the file with an .html or .htm extension (not .map).

Open the .html file. In the first line of the file, update the "src" attribute of the "img" tag to refer to the JPG or PNG file that you exported earlier in the process.

Test your image map to make sure it works correctly.

Here's my complete, functioning image map:

MHS Calendar


  
Exercise
Find at least 4 images that you'd like to make into an image map.  Follow the steps above to create an image map from the images.

 

GIMP Links

 

Videos

www.youtube.com/watch?v=jnG0nJbAoSM (has sound)