Photoshop - Image Maps

An image map is a combination of an image with a bit of HTML code that designates certain parts of the image as "clickable" hypertext links. The HTML for an image map consists of two parts:

  1. The map code - which includes coordinates and the map ID.
  2. The image tag - with map ID inserted.
<map id="treasure-map" name="treasure-map">

<area shape="rect" coords="97,75,142,106" href="http://geology.com/rocks/">

<area shape="rect" coords="48,38,87,76" href="http://www.palms.org/">

<area shape="rect" coords="120,17,155,50" href="http://www.imdb.com/title/tt0106179/">


<img usemap="#treasure-map" src="map.gif" width="189" height="155" border="0" alt="Treasure Map">
Web page:
Treasure Map

In the above "Treasure Map" (not an obvious example or anything), clicking the rock, the tree, or the letter X will each take you to a different place. The coordinates for the above map look like this:

area shape="rect" coords="97,75,142,106"
area shape="rect" coords="48,38,87,76"
area shape="rect" coords="120,17,155,50"

Overlaid on the image, they would look like this:

Treasure Map

The image tag for a mapped image is the same as a standard image tag with the addition of the usemap attribute and the map ID:

<img usemap="#treasure-map" src="images/map.gif" width="189" height="155" border="0" alt="treasure map">

There are several software packages that include tools for creating image maps but, unless you already own one of them, it is as easy to make them in Photoshop.

Making an image map using Photoshop:

1. Open the image that you want to map, in this case, a simple rectangle (we want the blue area to be a clickable link):


2. Place the cursor crosshairs at the top-left and bottom-right of the rectangle:


3. Note the x and y coordinates for top-left and bottom-right corners:


4. Create the map code:

<map id="blue_rectangle_map" name="blue_rectangle_map">
<area shape="rect" coords="X,Y,X,Y" href="someURLsomewhere" >
With coordinates added:
<map id="blue_rectangle_map" name="blue_rectangle_map">
<area shape="rect" coords="25,50,125,100" href="someURLsomewhere" >

5. Add usemap="#your-map-ID" to your image tag and put both the map code and image into your page:

<map id="blue_rectangle_map" name="blue_rectangle_map">
<area shape="rect" coords="25,50,125,100" href="someURLsomewhere" >

<img usemap="#blue_rectangle_map" src="blue_rectangle.jpg" width="150" height="150" alt="rectangle_plain" />
Web page:
Mouse over above image to observe the mapped area.


Circles are done as above but they only require one set of coordinates plus one for radius.

Using Photoshop, you determine the x and y coordinates of the center of the circle and then whatever diameter you want it to be:

<map id="blue_circle_map" name="blue_circle_map">
>area shape="circle" coords="75,75,45" href="someURLsomewhere" />

<img usemap="#blue_circle_map" src="blue_circle.jpg" width="150" height="150" />
Web page:


Polygons need one pair of coordinates for each point on the polygon.

Using Photoshop, you determine the x and y coordinates for each polygonal point:

<map id="blue_polygon_map" name="blue_polygon_map">
<area shape="poly" coords="21,77,82,52,128,79,105,114," href="someURLsomewhere" />

<img usemap="#blue_polygon_map" src="blue_polygon.jpg" width="150" height="150" />

Web page:

As in the "Treasure Map" example at the top of this page, you can create as many map "hotspots" in an image as you need.

Treasure Map
Previous | Webwork Table of Contents | Next >

Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
Along the Mississippi River
The Work of Antoni Gaudí

Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

Graphics, sounds, and other ancient
items from the dawn of the Web.


Jay Boersma