StarkeTech: Website Construction - Creating Image Maps

An image map is a graphic (either a drawing or a photograph) with one or more hot spots, or links. An invisible shape determines the boundaries, or coordinates, of the hot spot in the code of the page. An image map usually gives cues about where site visitors should click.

Example 1, Example 2, Example 3, Example 4, Example 5, Example 6, Example 7, Example 8

To create a hotspot in FrontPage, you will need the PICTURES toolbar. VIEW | TOOLBARS. There are three hotspot tools. Although hot spots can be shaped as rectangles, circles, or polygons, most images require rectangles

Open this webpage (imagemaps.htm) in FrontPage. FILE | EDIT WITH . . . FRONTPAGE. Experiment with the two images below. The Email button and the Highlights rectangle already have hotspots. (They do not have working links.) Note that the pointer turns into a hand when placed over each of these.

In FrontPage, click one of these images to activate the toolbar. At the right of the PICTURES toolbar (the real toolbar, not the picture above!), click the rectangle. The mouse pointer will become a pencil.

Draw a rectangle around one of the words or groups. (Don't try to get the rectangle exactly positioned; you can easily modify it later--the same way you re-size an image.)

In the INSERT HYPERLINK dialog box, select the local file to link to, or type in an external webpage. (For this exercise, just make up a file name.)

Check the code view to see how the coordinates for a hotspot have been inserted. For example, here is an example of part of the code that could be created for the email link in the first image:

Remember that you can check the code of many webpages in Internet Explorer by clicking VIEW | SOURCE. Now check the code of the image map on another webpage. (You will need to scroll down to the middle of the source page.) NOTE: In addition to image map coordinates, this webpage also uses a javascript mouse-over effect.

CREATING IMAGE MAPS