Everyday Computing Advanced Computing The Internet At Home Health, Mind & Body Making & Managing Money Sports & Leisure Travel Beyond The Classroom
Building Web Sites
Doing Business Online
Graphics & Animation
Using the Internet
Moms, Dads, and Grads -- Win $500!
Front Page 2003 For Dummies

Embedding Hyperlinks in a Picture with FrontPage 2003


Adapted From: Front Page 2003 For Dummies

An image map is simply a picture that contains more than one hyperlink. Visitors activate the different hyperlinks in the image map by clicking different places inside the picture.

The clickable areas of the picture are called hotspots. Hotspots work just like regular hyperlinks; they can link to an e-mail address, a downloadable file, or another location in the Web site or on the Internet. Most often, however, image maps contain links to other places inside the Web site.

FrontPage contains tools you use to "draw" hotspots on the picture of your choice. Hotspots are visible to you as you work with the image map in FrontPage, but when visitors look at your page with a Web browser, hotspots are invisible.

You don't want to turn just any old picture into an image map. Because hotspots are invisible to the visitor, the picture you choose should clearly indicate where to click, either with the help of a visual metaphor or with text labels. The ideal image map picture doesn't require explanation; the clickable areas should be obvious.

Don't worry if you can't get your hands on the ideal image map graphic. Even though image map hotspots are invisible when visitors view your page with a Web browser, the pointer changes shape and the hotspot's destination address appears in the browser's status bar when a visitor hovers the pointer over a hotspot. These clues are enough to prompt most visitors to click.

After you choose your picture, open the page in which you want the image map to appear and then in sert the picture into the page.

If you use an image map in your Web site, consider including a corresponding list of text hyperlinks somewhere else in the page. Visitors who surf the Web with their browsers' image-loading function turned off (or who use text-only browsers) cannot see regular pictures or image maps and, therefore, must rely on the text hyperlinks to move around.

Adding hotspots to a picture

After you find the right picture and insert it in your page, you're ready to draw the hotspots.

You use tools available on the Pictures toolbar to draw hotspots. You can draw rectangles, circles, and multisided shapes (polygons) around the areas you want to make clickable.

Don't confuse drawing hotspots with the graphic shapes you can create using FrontPage's drawing tools.

To draw hotspots on a picture, follow these steps:

1. Open the page containing the image map graphic and then click the picture.

2. Select View --> Toolbars --> Pictures.

The Pictures toolbar appears.

3. In the page, click the image map graphic to select it, and then, in the Pictures toolbar, click the Rectangular Hotspot, Circular Hotspot, or Polygonal Hotspot button.

Pick the shape that resembles the shape of the area you want to turn into a hotspot. You can always move or reshape the hotspot later, or delete the hotspot and start over.

4. Move the pointer over the picture.

The pointer turns into a little pencil.

5. Click the hotspot area and drag the cursor until the resulting hotspot surrounds the area.

Where to click depends on the shape you chose. Here's what to do for the different hotspot shapes:

• Rectangle: Click the corner of the hotspot area and drag the rectangle until the shape surrounds the area.

• Circle: Click the center of the hotspot area and drag. (The circle expands from its center point.)

• Polygon: Creating a polygonal hotspot is like playing connect the dots, only you decide where the dots are: Click the first point, release the mouse button, and then move the pointer. (This action produces a line.) Stretch the line to the second point — click, stretch, click, stretch — until you enclose your hotspot area. After you've finished defining the hotspot, click the hotspot's starting point, and FrontPage closes the hotspot for you.

You can overlap hotspots. If you do so, the most recent hotspot is on top, which means this hotspot takes priority if a visitor clicks the overlapped area.

After you draw the hotspot, the hotspot border appears on top of your picture, and the Insert Hyperlink dialog box appears, enabling you to associate a hyperlink with the hotspot.

6. Create a link for the hotspot, just as you would a regular hyperlink.

7. Keep creating hotspots until you define all the clickable areas inside the picture.

Areas not covered by a hotspot don't do anything if clicked unless you specify a default hyperlink.

8. When you're finished, click anywhere outside the picture to hide the hotspot borders.

For a quick look at all the hotspots inside the picture, click the Highlight Hotspots button on the Pictures toolbar. The picture becomes blank, and only the hotspot borders are visible. To return to the regular display, click the Highlight Hotspots button again.

To move a hotspot, click the hotspot and then drag it to a new position.

To reshape a hotspot, click the hotspot to make its size handles visible (those little square dots along the hotspot border), and then click a handle and drag it until the hotspot looks the way you want. Size handles act differently, depending on the shape of the hotspot. Working with handles is not a precise science. Just keep clicking, dragging, and stretching until you're happy with the results.

To change a hotspot's hyperlink, click the picture to make the hotspots visible and then double-click the hotspot to open the Edit Hyperlink dialog box. Make any changes you want and then click OK to close the dialog box.

To delete a hotspot, click the hotspot and then press the Backspace or Delete key.

Related Articles
Creating a Grid Table in FrontPage 2003
Understanding How Forms Work in FrontPage 2003
Tabling Your Layout with FrontPage 2003
Noting What's New in Dreamweaver MX 2004
Setting Up Web Server Access with Dreamweaver MX 2004
Related Titles
Adobe Creative Suite 3 Web Premium All-in-One Desk Reference For Dummies
HTML, XHTML & CSS For Dummies, 6th Edition
Microsoft Publisher 2000 For Dummies
Microsoft SharePoint 2003 For Dummies
Dreamweaver 8 For Dummies