Creating an Imagemap

To use MapEdit to create a client-side imagemap, you first create your page (in Composer or another tool) and insert in the page the image you will use for the imagemap. You then open the page in MapEdit to turn the image into an imagemap, as described in the following example.

In general, you should finish all other aspects of the page (in Composer or in another Web authoring program) before using MapEdit to make one or more images in the page into imagemaps.

Why? Well, if you change the size or shape or any other aspects of an image in the page after you create the imagemap, the imagemap might not work properly anymore. In practice, you can probably do some manipulation of the page safely after adding the imagemap, but it's hard to predict which kinds of changes will create problems later and which won't. You should leave MapEdit for the final step.

If, after creating an imagemap, you decide that you must make major changes to the page (or if you've already made such changes and discover that your imagemap no longer works properly), the best solution is to reopen the page and image in MapEdit (as described in steps 2 through 5 of the example) and adjust the regions as needed.

1. Using Composer or another tool, create the page and insert in it the image that will become the imagemap.

2. Open MapEdit from the Windows Start menu by choosing Programs, MapEdit, MapEdit.

3. Choose File, Open HTML Document.

4. Navigate to and select the file of the Web page you created in Step 1 and then click Open.

5. The list shows all the image files in the page. Click the one that will serve as the imagemap and then click OK.

   Figure 29.5. Step 5: From the images shown in the page you opened in step 4, choose the one for the imagemap.

   

6. Consider the general shape of the first region to which you want to attach a link: Is it more or less circular or rectangular, or is it a more irregular polygon? Decide what the closest shape is and then click that shape in the toolbar.

7. Click and drag to draw a shape that generally covers the region:

   • For a circle, click in the center of the region and drag outward. When the shape generally covers the region, click once.

   • For a rectangle, click in the upper-right corner of the region and drag diagonally toward the lower-right corner. When the shape generally covers the region, click once.

   • For a polygon, click one corner of the region and drag to another corner to draw a line. Click the corner you've arrived at to stop that line and then drag to the next corner. Continue until you have drawn a shape completely around the region and then right-click.

   Figure 29.6. Step 7: Click a shape tool and draw a shape to define the region.

   

   

   If you don't like the point where you started a shape, press Esc to clear the shape and start over.

   In steps 6 and 7, don't fuss too much over trying to perfectly match a shape to a region. As long as the shape you draw roughly covers the region and does not overlap with other shapes you draw for other regions, it's no big deal if some gaps occur between the shapes covering regions or if the shape covers a little bit of space outside the region.

   Understanding this, you find that in most cases you can use the Circle or Rectangle tools to draw your rough shapes, resorting to the more laborious Polygon tool for only special circumstances.

8. Fill in the URL to which a visitor should be taken when clicking this region and click OK (see Figure 29.7).

   Figure 29.7. Step 8: Fill in the URL to which this region points.

   

   

   The TARGET field in the dialog box shown in Figure 29.7 is not for entering the name of a bookmark (see Chapter 23, "Making Links") as you might expect, but rather for choosing the target frame .

   If the HTML file you opened in step 2 will be part of a frames-based Web page, you can enter in the TARGET field the name of the frame in which you want the file or page opened by this link to appear. See Chapter 27, "Dividing a Page into Frames ."

9. Repeat Steps 6, 7, and 8 for each region in the image (see Figure 29.8). (You can use different kinds of shapes and different kinds of URLs for different regions.)

   Figure 29.8. Step 9: Complete the regions.

   

10. Choose File, Save HTML Document to save the Web page file with its new imagemap added to it.

11. Preview the file in a Web browser to test the links.

    

    In Step 8 of the example, you can enter any type of URL: one pointing to a Web site or Web page (for example, http://www.samspublishing.com ), the filename of another Web page in your Web site, stored in the same folder ( page2.html ), a link to an email address ( mailto:[e-mail] ), or the name of a file for downloading ( resume.doc ).

    To make the link point to a particular bookmark ( target ), add a hash mark and the bookmark name ( #hours3 ) to the URL as described in Chapter 23.