Defining Clickable Regions In An Image


To create an image map in an HTML document, you must begin with a graphic image file in either GIF or JPEG format. The image of the cube (see Client-side Image maps) was created in Microsoft Paint and saved as a JPEG file.

You then need to identify the coordinates of each region or hot spot within the image that you wish to link with an associated URL. When the user clicks within a specific region, the browser will load the corresponding Web page. The regions are defined by pixel coordinates relative to the upper left corner of the image, which corresponds to coordinate (0,0). The first coordinate is the horizontal or x coordinate, whose value increases as you move from left to right within the image. The second coordinate is the vertical or y coordinate, whose value increases as you move from top to bottom in the image.

If you create your own graphic in a program such as Microsoft Paint, the coordinates of any pixel pointed to by the mouse are displayed at the bottom of the screen; however, if you wish to use an existing graphic you may wish to use software specifically designed to map an image for this purpose.

There are various tools and software packages available to ease the production of image maps - these eliminate the need for measuring or calculating the coordinates. Mapedit (figure 3) was used to work out the coordinates for the image of the cube, although most graphics and web authoring packages are also capable of constructing the maps by selecting the object or area and typing in the URL. Only rectangles, circles and polygons can be used as areas in the HTML code.


(Figure 3)

When you open Mapedit, a dialogue box appears to choose an HTML file to open. When the appropriate file is open Mapedit lists all the image files in the page (figure 2). Select the image to be used as the image map. Choose the shape tool relative to the shape of the area where you wish to attach a link and apply this to the image.

Another dialogue box will appear prompting you to type in the URL for the particular link to this 'hot spot' (figure 4).

The URL you enter should be a legal URL. For example: Relative URLs such as filename.htm are even better because they still work if you move your documents to another site. Do not enter HTML tags in the URL field. Only the URL is needed.

ALT (Alternative) Text - It is suggested that a text alternative is entered (the ALT field) for each hotspot. When your page is viewed by a web browser that does not support graphics, the user may also be presented with a menu of the text alternatives, instead of an image.