WWW School Create An Image Map

How to
Create An Image Map
Sample in context

An image map is a collection of hotspots or links organized in a pictorial manner. The image map on the left links to 5 different places on this page. Use the mouse to determine the location of the 5th, unmarked, link and test each link.

Above, the school logo image links to only 1 location, the WWW School home page, so, it is not an image map. The image map at the left links to many distinct locations.

Below, the image does not link anywhere. Check this with your mouse.

1. To create an image map, first draw the image.

2. Coordinates for the desired hot spots must be named and are shown in the graphics program as the mouse moves over each point.

Two numbers, ordered coordinates (named by the number of pixels to the right, then the number of pixels down) are required to name a point. The numbering starts in the upper left corner of the image,increase from left to right, and increases from top to bottom.

Below, the upper left corner of rectangle two is at 6,8 (6 to the right, 8 down). The upper right corner of rectangle two is 59,8 (59 to the right, 8 down).

3. As shown above, PCPaintbrush® program, which created the image, is side-by-side Notepad® for recording coordinates -- taking notes.

Below, the tags with necessary properties are listed for each desired shape. One might use a circle (named by center then radius), rectangle (named by one corner then the diagonal corner), polygon (named by a string of coordinates starting at one vertex and naming EACH vertex in order).

<AREA SHAPE=RECT COORDS="42,58,93,89" HREF="#one"> <AREA SHAPE=POLY COORDS="6,8,59,8, 59,58,42,58,42,89, 59,88,59,115,6,115" HREF="#two"> <AREA SHAPE=CIRCLE COORDS="259,30,24" HREF="#three"> <AREA SHAPE=POLY COORDS="182,137, 190,123,182,108,198,115,205,109, 204,103,213,109,224,111,233,120, 207,136,205,130,195,130" HREF="#four"> <AREA SHAPE=POLY COORDS="21,163, 136,163, 127,190,29,191" HREF="#www"> 1 --rectangle
42,58 diagonal to 93,89

2 -- most of rectangle
6,8 to 59,8 to 59,58 to
42,58 to 42,89 to 59,88
to 59,115 to 6,115

3 -- circle at 259,30
radius of 24

4 -- fish at
182,137 to 190,123 to
182,108 to 198,115 to
205,109 to 204,103 to
213,109 to 224,111 to
233,120 to 207,136 to
205,130 to 195,130

5 -- www at
21,163 to 136,163 to
127,190 to 29,191

The hard work is now complete. Steps four and five remain.

4. The image must be changed to an image map by including a USEMAP attribute.

<IMG SRC="nameofimage.gif">

becomes

<IMG SRC="nameofimage.gif" USEMAP="#nameofmap">

5. The components of the image map must be listed within the map tags.

<MAP NAME="nameofmap">


	<AREA SHAPE=RECT COORDS="42,58,93,89" HREF="#one">

	<AREA SHAPE=POLY COORDS="6,8,59,8,59,58,42,58,42,89,59,88,59,115,6,115" HREF="#two">

	<AREA SHAPE=CIRCLE COORDS="259,30,24" HREF="#three">

	<AREA SHAPE=POLY COORDS="182,137,190,123,182,108,198,115,205,109,
      
		204,103,213,109,224,111,233,120,207,136,205,130,195,130" HREF="#four">

	<AREA SHAPE=POLY COORDS="21,163,136,163,127,190,29,191" HREF="#www">


	</MAP>

Note: This page has been set up so that the code -- tags and attributes -- may be selected, copied, pasted to your own web pages, and edited to fit your needs.