If you have any experience in browsing or creating web pages, you will no doubt be aware that it is possible to make an image into a hyperlink, so that when you click on the image, you go to another page. But did you know that it is also possible to create images in which portions of the image ("hotspots") act as hyperlinks? These special images are called imagemaps.
Making an imagemap is fairly straightforward. You need to incorporate an image (either a GIF or a JPEG) into your web page in the normal way. You then use the FrontPage Image toolbar to indicate the hotspots on the image, together with the address of the page that they link to.
Technical note: FrontPage creates "client-side" image maps, which store the details about the map hotspots as an integral part of your HTML document. This type of image map works in most (but not all) web browsers. There is a second type of image map - "server-side" maps, which use a program running on a web server to work out the co-ordinates of the mouse on the image. This type of map is not used very often, but works in virtually all web browsers.
Step One: Find a suitable image
If you want to create an image map, then you will need an image! Once you have found or created a suitable image, load it into your FrontPage web page in the normal way (using the menu bar command Insert|Image...)
The image I want to use as my imagemap is shown below:
This image was created in a 3D graphics program, but you can of course create the image you want to use in any program you choose. The main criteria for an imagemap is that it should have areas that will be clearly identifiable as links. In this example image, the round buttons and the text next to each of the buttons will be turned into hotspots.
Step Two: Identifying the hotspots
This procedure is made easier if the Image toolbar is visible. The toolbar normally appears when you click on an image, but it can also be displayed by selecting the menu bar command View|Image Toolbar. Note that under FrontPage 98, the Image toolbar has gained a large number of additional icons compared to its 97 incarnation. I will explain the use of these other icons in future articles, but for now, the only icons in the toolbar required for image maps are shown in the diagram below:
With the image highlighted, click on the Rectangular hotspot button of the Image toolbar, and the mouse pointer will turn into the shape of a pencil. This will enable you to define a hotspot area. For example, to define a hotspot around the Graphics text in my particular imagemap, I clicked on the top left hand corner of the Graphics text part of the image, then holding the mouse button down, moved the mouse so that the box completely surrounded the text (see diagram below).
After you have done this, releasing the mouse will display the Edit Hyperlink window, in which the URL of the page you want the particular hotspot to link to can be entered (for the Graphics hotspot, this is the URL http://www.babylon6.demon.co.uk/graphics.html ). Don't worry if you haven't defined the hotspot properly, as they can be edited (or even deleted) at a later stage. An important consideration when designing imagemaps is to ensure that the hotspots do not overlap, or the person looking at your web page will invariably end up being sent to a different page to the one they thought they had clicked on.
To edit a hotspot, click on it once, then drag the small squares that surround the hotspot. Alternatively, double-clicking on the hotspot will enable you to change the URL that it points to. If a hotspot is selected, pressing the Delete key on the keyboard will remove it.
Note that you aren't confined to defining square or rectangular hotspots - you can also define circles, or by using the polygon tool, even more elaborate shapes.
FrontPage 98 also has a handy Highlight HotSpots button on the Image toolbar. For example, the imagemap used on this page will show the following hotspots highlighted:
Other points:
Finally, the completed image map is shown below:
Note that when you move the mouse over the image, the pointer usually turns into a hand shape over a hotspot. The destination URL of the hotspot will be shown in the browser's status bar.
Author: Brett Burridge
Date: 02/26/98
More articles about FrontPage
More articles by Brett Burridge
Author Biography