An image map is a clickable graphic. It is a graphic with links to other web pages hidden within the image. Click on one part of the graphic and go to one web page. Click on another part of the graphic and go to another web page. Where to click is indicated by what is illustrated in the graphic.
The first step to creating an image map is to decide what links you want the image to link to.
The second step is to decide what graphic to use. You may use a photo, a scanned image, a computer-created graphic, etc. Any GIF or JPG image will do. You will want your image to relate to the topics of the web pages and/or web sites where the user will be taken. It wouldn't make sense to click on flowers and go to information about asteroids. So, have your image illustrate the topic of the web page destinations.
Before you go to step three you will need to know that each area defined as a link will fall into one of three shapes: rectangle, circle, or polygon. The rectangle is defined by the x and y coordinates of two of its corners diagnally across from each other. The circle is defined by the x and y coordinates of its center and the radius. The polygon is defined by the x and y coordinates of each of its corners.
The third step is to define the areas that will be used as separate links by locating the coordinates fo each specific link area. This can be done with Graphic Converter. See the chapter Gathering Graphics for Your Web Page for information about Graphic Converter. Using Graphic Converter to map the coordinates of your image is easy:
- Open Graphic Converter.
- From the File menu drag down to Open.
- Follow the path to open your graphic.
- The x and y coordinates show in the upper right corner as you move the crossbar over the image. Move the crossbar to the desired corners and write down each coordinate.
<MAP NAME=“map_name”>
This tag begins an image map.
| </MAP> |
|
This tag ends an image map. |
Example of code for an image map:
<MAP NAME=“map_name”>
<AREA SHAPE=RECT COORDS=“x,y,x,y” HREF=“document_name.html”></MAP> <IMG SRC=“folder_name/graphic_name.gif” USEMAP= “#map_name”>
<AREA SHAPE=CIRCLE COORDS=“x,y,r” HREF=“document_name.html”>
<AREA SHAPE=POLY COORDS=“x,y,x,y,x,y,x,y” HREF=“document_name.html”>
<AREA SHAPE=RECT COORDS=“x,y,x,y” HREF=“document_name.html”>
<AREA SHAPE=RECT COORDS=“x,y,x,y” HREF=“document_name.html”>
<AREA SHAPE=POLY COORDS=“x,y,x,y,x,y” HREF=“document_name.html”>
In the code above the <AREA SHAPE> tag is placed between the <MAP> tags and indicates what type of shape the browser is reading (rectangle, circle, or polygon). It also provides the browser with the coordinates of the shape and the URL address or location of the web page it is to open. Use as many <AREA SHAPE> tags as there are areas to click.
Whie the <MAP> tag ends the image map, it is still necessary to have the <IMG SRC> tag to show what graphic will be used for the image map. That <IMG SRC> also hs the USEMAP attribute to indicate it is the image to be used in conjunction with the image map. The map name in the USEMAP attribute is the same name as the map name in the opeing image map tag, <MAP NAME=“map_name”>.
© Barbara Gibson, October 1996
Fourth Edition, January 1998