Metuchen High School: GIMP
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. Each image will be associated with a different link. When you've completed adding images to the background, save the project file (.xcf) and export an image from the project (CTRL-E), either a JPG or PNG. Check the Layers Dialog (CTRL-L) to make sure that there is just 1 layer. If there are 2+ layers, use Layer > Merge Down to reduce the number of layers to 1.
Choose Filters > Web > Image Map. Maximize the window; all of the images should display. 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.
Still in the Image Map window, 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.
Test your image map's HTML file to make sure it works correctly. You can open the file in Chrome with CTRL-O.
Here's my complete, functioning image map:
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.
www.youtube.com/watch?v=jnG0nJbAoSM (has sound)