To Temple College Class logo R. Craig Collins > Web Page Design > Image Maps

Image Maps © R. Craig Collins, 2005/16

An image map is simply an image that can be used to link to different sites by clicking on various areas of an image, called hot spots. The hot spots are rectangles, circles, or polygons defined in HTML; the defined hot spots are then associated with a web site as a link.
Float your mouse over the image one the left, note: only when you cross the rectangle floppy, the circle, or the star-like polygon, does the mouse change.
The image on the right just uses rectangles over the Discussions, Dropbox, and Quizzes.

Folder Example Rectangle Circular Polygon
 • Using D2L Discussions    • Using D2L dropbox       • Using D2L Quizzes      • Log in to D2L

 
D2L navigation D2L Dropbox notes D2L Quizzes Notes D2L Discussion Notes

While, in theory, you can make an image map simply with a text editor, most people use their HTML editor or their graphics editor to not only define the hot spot, but also create the HTML code. Below are instructions for using an HTML editor or a graphics editor.

If you are using Dreamweaver, after inserting the image, select the image, and you will activate the image map tools in the Properties area, at the bottom of the screen.

Once you draw the hot spot, you will then get a new addition to the properties area, a place for the link and a place for the URL. That simple.

If using GIMP, start by opening an image, and then choosing Filters/Web menu, and select Image Map.
GIMP Filter Web menu

The Image Map window opens, allowing you to choose a hot spot shape to drag over parts of your image
GIMP Image Map window

As soon as an area has been defined, the Settings dialog appears. This is used to specify the hyper-link associated to the selected area.
GIMP link hotspot

After all the desired areas have been selected and hyper-links defined, you can save the work by clicking on the disk icon or selecting the Save As function from the File menu.

This creates a web page with the image map information, so the file extension should be .html or .htm.
No changes are actually made to the image.

You can then copy and paste the relevant image map info into another web page, as you may choose to do in this week's lab.

You may also wish to read GIMP Savvy's Image Map Tutorial.

The Image Map tool is not available in Photoshop CS3. It is available in the Fireworks CS3 Toolbar as the Hot spot Tool.

If you use an older version of Photoshop: Open your image in PhotoShop; after prep, click the ImageReady icon, bottom right of the tool box.

Or, just open ImageReady, and open your file directly.

Now go to Window > Image Map.

Select the appropriate Image Map tool (Item #1 below; you have choices here, rectangle, circle, or polygon.).



Use the cursor to select the hot spot on the image, as in item #2, below.

In the Image Map palette (item #3 below), Enter URL to page for Link. You may also add a Target and Alt tag as needed.




Repeat until all area's are mapped.

To Save image and code... simply go to Save Optimized As.. (Be sure to select "HTML and Image"). This will save the image and create an html page; you can copy the image map code into another page.