Image Maps
Image maps are images containing "clickable" areas or hot spots, each of which have a link attributed to them. Whilst this chapter explains the principle behind how image maps work, they can be very complex. You will therefore appreciate using the Insert Image Map feature in the BestAddress HTML Editor.
About Image Map Coordinates
Everything you see on the computer screen, including graphics, consist of small points of light called pixels. The placement and size of these remains consistant among all computers, although the number available varies. For example, one computer screen may have 640 columns of pixels (horizontal) by 480 rows (vertical) while others may have 800 by 600, 1024 by 768, 1280 by 1024, and so on.
Similarly to the pixels on computer screens, an image's coordinates are numbered from 0,0 in its top left corner onwards. The coordinates are defined using the letter X for the horizontal value and Y for the vertical value.
Using coordinates in an image, it is possible to set the placement and sizes of hot spots in the image. The following diagram demonstrates this on an image 300 pixels in width and 50 pixels in height:
If you wanted to define region A in the above diagram as a hot spot, you would use the coordinates 0,0 and 99,49. Similarly, region B is defined by the coordinates 99,0 and 199,49 and region C is defined by the coordinates 199,0 and 299,49.
Defining Image Map Coordinates
Using BestAddress, defining image map coordinates is easy. Simply choose Image Map from the Insert menu to open the image map editor.
In the dialog box, choose the image file you want to open. Type a name for the image map in the Image Map Name box. Using the shape toolbar choose a shape, and draw the regions you want in the image map. A rectangle, circle and polygon tool is available to use. Once you have defined all your regions, click the Insert button. BestAddress will define all your image map's coordinates for you. You can then go through the code and define the hyperlinks for each hot spot by replacing the value in each hot spot's href= attribute.
Applying the Image Map
Inserting image map coordinates does not insert the image into your document. You need to do this separately by choosing Image from the Insert menu. Choose the same image to insert as the image you used to define your image map. Choose the name of the image map to use from the list in the Use Image Map box. Click OK.
Save and preview your document in the BestAddress HTML Editor to view the image map in your default Web browser.
Where to from here?
As your website grows, you will undoubtedly want to allow your visitors to contact you or provide a means of adding some "interactivity" to your pages. |
