Webwork
/
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.
Source:
<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/">

</map>

<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:

Source:
<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):

rectangle_plain

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

photoshop_info

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

rect

4. Create the map code:

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

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

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

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

Circles

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:

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

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

Polygons

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:

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

<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 >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma