Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Microsoft FrontPage

The FrontPage Editor comes with an Image toolbar that activates whenever you select an image. In addition to basic image operations such as cropping, rotating, and changing contrast, buttons on the Image toolbar can also help you set up hot regions in an imagemap. The imagemap-related buttons are the first five you see on the left end of the toolbar (see Figure 4.6).

•  See “How FrontPage Handles Imagemaps,” p. 300.

FIGURE 4.6  FrontPage’s Image toolbar includes buttons for setting up imagemaps.

An important thing to note about FrontPage’s imagemap handling is that, by default, it is done using a preprogrammed page object called a bot. When you look at the code FrontPage generates to support an imagemap, you will see something like this:

<!--webbot bot=“ImageMap”
polygon=“ (201,163) (237,139) (303,148) (329,180) (310,208) pageone.htm”
 rectangle=“ (228,309) (278, 397)  pagetwo.htm”
circle=“ (281,83) 60  pagethree.htm” src=“map.gif”
alt=“map.gif (18273 bytes)” align=“right” width=“600” height=“380” -->

This is a call to the FrontPage Imagemap bot—a piece of executable code that resides on a FrontPage-compliant Web server. If you’re not using a FrontPage-compliant server, this code won’t do you or your visitors any good. Fortunately, you can instruct FrontPage to write client-side imagemap code instead by performing these steps:

1.  In the FrontPage Explorer, choose Tools, Web Settings; then click the Advanced tab.

2.  Make sure the Generate Client-Side Imagemaps option near the top of the dialog box is checked.

3.  Select the Netscape option from the Style drop-down list.

4.  Click OK.

This tells FrontPage that it should not use the Imagemap bot, and the code you find in your HTML files should be consistent with the HTML standard for client-side imagemaps.

After you have loaded an imagemap graphic, you can select the Rectangle, Circle, or Polygon tool by clicking its button on the toolbar. When using the Rectangle tool, click the upper-left corner of the rectangular hot region and then click the lower-right corner. As you move from upper left to lower right, a rectangular trace will be dragged across the hot region. After you click the lower right, you will see the Create Hyperlink dialog box shown in Figure 4.7. Here you can enter the URL to be associated with the hot region.

FIGURE 4.7  You can enter a URL for a hot region or link to a page available in the open FrontPage Web.

The FrontPage Circle tool works much the same as Mapedit’s—click at the center of the circle, move the mouse pointer to a point on the edge of the circle, and then release the mouse button to open the dialog box you saw in Figure 4.7. To use the FrontPage Polygon tool, click the first vertex of the polygon, followed by each of the other vertices, until you hit the last one. Then click again on the first vertex and the URL box will appear.

	If you are dissatisfied with how a trace is coming out, switch to the Select tool (the first button on the Image toolbar), select the trace, and then press the Delete key.

Live Image

Live Image is an easy-to-use imagemapping tool for Windows 95 and Windows NT. If you have used a program called Map This! in the past, Live Image may seem very familiar. Indeed, Live Image is an enhanced version of Map This!, but the enhancements come (literally) with a price. A single-user license for Live Image will set you back $29.95.

Figure 4.8 shows the Live Image interface. The large area on the right side of the window is where the imagemap graphic loads. On the left is a listing of the hot regions you have defined. You can drag the separator bar between the two sides to a new position, if you want to change the size of either.

FIGURE 4.8  Live Image enables you to see both the imagemap graphic and your hot regions simultaneously.

Live Image’s interface is very intuitive, particularly those buttons you use to create hot regions. Just click the button corresponding to the shape of the hot region you want to define, and then trace the hot region with your mouse. When you finish, you will see a dialog box like the one in Figure 4.8 prompting you for a URL, a target frame, and any comments you want to associate with the region. Note also that hot regions are shaded on the graphic.

You also receive a lot of extras in Live Image that you don’t receive in other imagemap programs. In addition to being able to zoom in and out on the graphic, for example, you can also set up a grid over the image to assist you with very precise hot region traces. You can control the fineness of the grid, and you can even have points in your hot region trace snap to the grid.

Live Image enables you to test an imagemap in two ways. The first is through a “simulated browser” built into Live Image. When you test this way, you move your mouse pointer over the imagemap graphic and you will see URLs show up at the bottom of the screen as you pass over a hot region. The second way is to load the HTML file that Live Image produces into a actual browser and test it there.

Some of the other distinguishing features of Live Image include the following:

•  A URL Checker that tests the URLs you associate with your hot regions to make sure they are valid

•  Support for morphing one type of hot region into another

•  The ability to work with more advanced types of files, such as ColdFusion templates, Active Server Page files, and Cascading Style Sheets

•  JavaScript support for mouse-related events (onMouseOver and onMouseOut)

•  Sample imagemaps and extensive help files

•  A Settings tab where you can specify a map’s name, author, default URL, and other information

Although you do have to pay a small amount of money for Live Image, you get quite a lot in return. You can learn more about Live Image by visiting http://www.mediatec.com/.