Image Maps and Flow Charts

By Aaron Maltais
November 2000

An image map is an image on a Web page that has two or more links within it. Clicking on different parts of the image activates the links. An example of an image map might be an image of the world where clicking on any country will send the user to an information page on that country. Drawing on the experience of converting a flow chart document for use on a Web site, this case study will explain how to create image maps for Web pages and provide some information on flow charts for the Web.

To begin with, there are some good reasons to avoid using client-side image maps on your Web site. Some older Web browsers will not be able to interpret the HTML code that creates the image map. However, Netscape 2.0 and Internet Explorer 2.0 or greater will read the HTML for the simple client-side image map described below. Compatibility is not a significant concern.

Instead of creating an image map, one can cut an image into several smaller images using graphics software such as Adobe Photoshop or Paint Shop Pro. Using tables, each separate image can be arranged to recreate the original image on a Web page. For each separate image a link is created, resulting in the effect of an image map without using advanced HTML code. This might be simpler than creating an image map when the image is quite basic and can be cut into a few easily arranged parts, but it can be problematic and messy if the image is a little more complicated.

The flow chart below was not a good candidate for being cut into several images.

Only the blue boxes are linked objects in the image. The links point to a more detailed flow chart for each subject area. As the boxes have a shaded effect and sporadic locations, cutting the image into several images was too difficult.

The decision was made to create an image map. As the flow chart software used to create the image above promised that this could be done automatically, this option was particularly appealing.

The flow chart was created in a software package called iGrafx. As a flow chart document, the boxes to be linked are individual objects and can be linked to other documents such as web sites. When converted to HTML, the software changes the flow chart into an image and automatically creates a separate HTML page that references the image and writes the HTML code to achieve the desired image map. This process is the same in many other flow chart software packages.

In this case, the software package included the unsightly file name of the flow chart at the top of the image. This had to be erased in Photoshop. As well, the image had wide white margins that made it unnecessarily large in terms of pixels and memory. All these problems were easily fixed in Photoshop by cutting the margins. However, changing the image in Photoshop resulted in the image map (HTML code) created by iGrafx becoming invalid. This is where knowing HTML well became a valuable skill. Solving this problem proved to be quite easy but required an understanding of how image maps are created using HTML.

The HTML code written for the above image map (i.e., flowchart) is:

 <table width="100%">
 <tr><td align=center>


 <IMG SRC="treenav.gif" BORDER=0 USEMAP="#LINKMAP1">
 <MAP NAME="LINKMAP1">
 <AREA SHAPE="RECT" COORDS="282,75,498,105" HREF="effect.html">
 <AREA SHAPE="RECT" COORDS="290,195,510,230" HREF="co-operation.html">
 <AREA SHAPE="RECT" COORDS="60,275,245,340" HREF="water.html">
 <AREA SHAPE="RECT" COORDS="405,320,610,365" HREF="clean.html">
 <AREA SHAPE="RECT" COORDS="165,438,395,490" HREF="organic.html">
 <AREA SHAPE="RECT" COORDS="410,475,625,520" HREF="eco.html">
 </MAP>

 </td></tr>
 </table>

First, the flow chart image is referenced using the <IMG SRC="****" BORDER=0 USEMAP="****"> tag. Note that the USEMAP= "****" attribute indicates a name for the image. This name can be whatever you choose, but must include the # symbol before the name.

Next, one has to insert the <MAP NAME= "****"> tag which lets the browser know that an image map will follow. The NAME= "****" attribute points to the image that will be mapped. The name you chose in the <IMG SRC> tag for the USEMAP= "****" attribute is placed here, but without the # symbol in front of the name.

For each link on a image map the following tag must be completed, <AREA SHAPE= "****" COORDS= "****" HREF= "****">. Notice that there must always be three attributes within the <AREA> tag.

• The SHAPE= "****" attribute tells the browser if the shape will be "RECT", meaning rectangle, "CIRCLE" or "POLY", meaning polygon.
• The pixel coordinates listed after the COORDS= "****" attribute will determine the size of the area and its location on the image. Each point on an image consists of an X and Y pixel coordinate. Notice in the HTML code above that there are four coordinates. These are two sets of X-Y coordinates. The first two coordinates point to the upper left corner of the rectangle while the second set point to the lower right corner. With this information the browser is able to create a rectangular area. For circles, the X-Y coordinate for the centre of the circle is required, as is the desired radius (in pixels). For a polygon, the user can input any number of X-Y points. The browser will then connect these points.
• After the HREF= "****" attribute simply reference a link as normal.

The most difficult task in creating an image map is getting the coordinates needed to reference the correct area on the image. The best way to do this is to open the image in a graphics software package like Adobe Photoshop or Paint Shop Pro. These programs will give you the pixel coordinates of your mouse location when the image is open. Simply place the mouse over the point for which you need coordinates and write the coordinates down for use in your HTML code. Trial and error by moving from the HTML code to a preview of the image in a browser also works but takes a little more time.

The flow chart software used to create the image above was useful for two important reasons. First, it allowed me to create a flow chart that looks much better than anything I could create using HTML code alone. Second, it converted the flow chart from the format specified in the software into an image so that it could be used on a Web site. The software also created an HTML page with code for an image map of the flow chart image. However, this code became invalid if the image was edited in any way, and images often have to be edited for use on web pages. Without knowledge of the HTML code for creating image maps, this limitation of the flow chart software could have proven to be a difficult issue to overcome. But with a little knowledge of image maps, creating a flow chart that looked good while serving as a very useful navigation tool proved to be a simple task.