Metuchen High School: GIMP

 

Image Maps                              

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 him to a given destination.  If she clicks on another section, it will take her 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 begin with this image, which is intended for the Metuchen High School website:

First, open the image in GIMP.  Then choose Filters > Web > Image Map.  To associate a link with the circular clock at the top, 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 selected, hit Enter.  In the Settings dialog, under "URL to activate when this area is clicked:" enter the URL to associate with clicking on the clock.  Unclick the "Relative Link" box and choose OK.

To associate a link with the rectangular "Cafeteria Schedule", 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 selected hit Enter.  In the Settings dialog, under "URL to activate when this area is clicked:" enter the URL to associate with clicking on the rectangle.  Unclick the "Relative Link" box and choose OK.

To associate a link with the polygonal "Library," click on the polygon icon.  Click at a corner of the image of the books and click repeatedly around the books until you're back where you started.  When the polygon is selected hit Enter.    In the Settings dialog, under "URL to activate when this area is clicked:" enter the URL to associate with clicking on the rectangle.  Unclick the "Relative Link" box and choose OK.

Do File > Save As and rename the file with a .html extension.

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.  Start with a blank image and position your images onto the blank image.  Then save the image, so that all the images now are a part of one image.  Follow the steps above to enable the image to function as an image map.

 

GIMP Links

 

 

Videos

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