Embedding More than One Hyperlink in a Picture


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 (see Figure 4-12).

image from book

From http://www.dummies.com. Copyright © 2006 by Wiley Publishing, Inc. All rights reserved. Reproduced here by permission of the publisher.


Figure 4-12: The "buttons" show visitors where to click to activate a hyperlink.

The clickable areas of the picture are hotspots. Hotspots work just like regular hyperlinks: They can link to e-mail addresses, downloadable files, or other locations in the Web site or on the Internet. Most often, however, image maps contain links to other places inside the Web site.

Expression Web 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 Expression Web, but when visitors look at your page with a Web browser, hotspots are invisible. (Visitors see only the image map graphic.)

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 (the example shown in Figure 4-12 uses buttons) 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 cursor changes shape and the hotspot's destination address appears on the browser's status bar when a visitor hovers the cursor 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 insert the picture into the page. (Flip to Chapter 5 if you're not sure how to insert a picture.)

Tip 

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 in order 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.

To draw hotspots on a picture, follow these steps:

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

  2. Choose View image from book Toolbars image from book Pictures.

    The Pictures toolbar appears.

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

    image from book 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. image from book Move the cursor over the picture.

    The cursor 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, except that you decide where the dots are: Click the first point, release the mouse button, and then move the cursor. (This action produces a line.) Stretch the line to the second point-click, stretch, click, stretch-until you enclose your hotspot area. After you finish defining the hotspot, click the hotspot's starting point, and Expression Web closes the hotspot for you.

    You can overlap hotspots. If you do so, the most recent hotspot is on top, which means that 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 for a regular hyperlink.

    Tip 

    Give your hotspot link a ScreenTip so that your visitors know where they'll go when they click the hotspot. (Click the ScreenTip button in the Insert Hyperlink dialog box; we explain ScreenTips earlier in this chapter.)

  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. (I show you how to do this in the following section.)

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

Here are some other handy tricks to know as you fine-tune your hotspots:

  • image from book 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 isn't 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.

Setting the default hyperlink

The final (and optional) step in creating an image map is setting the image map's default hyperlink. Visitors jump to the destination of the default hyper-link if they click anywhere on the image map not covered by a hotspot. If you forgo the default hyperlink, clicking an undefined area does nothing.

Tip 

In general, we recommend skipping this step. Visitors expecting to click hotspots can get confused when they click outside a hotspot (which, intuitively, should accomplish nothing) and are still sent to a different location. However, if you find that it makes sense for your image map to have a default hyperlink, feel free to add one.

To set an image map's default hyperlink, follow these steps:

  1. Right-click the image map and then choose Picture Properties from the pop-up menu that appears.

    The Picture Properties dialog box appears with the General tab visible.

  2. In the Hyperlink area of the tab, type the default hyperlink's URL in the Location text box.

    If you can't remember the URL, click the Browse button to display the Edit Hyperlink dialog box. We explain how to use this dialog box in the "Editing Hyperlinks" section, earlier in this chapter.

    After you specify the URL, click OK to close the Edit Hyperlink dialog box. The Picture Properties dialog box becomes visible again, with the default hyperlink's URL visible in the Location text box.

    Tip 

    image from book If you want the hyperlink destination to open in a new browser window, click the Change Target Frame button next to the Target Frame text box, and in the Target Frame dialog box that appears, choose New Window. Click OK to close the Target Frame dialog box. In the Picture Properties dialog box, in the Target Frame text box, New Window appears.

  3. Click OK to close the dialog box.

    Expression Web applies the default hyperlink to the image map.

To test-drive the image map, preview your page and click away. (Refer to Chapter 2 if you're not sure how.)



Microsoft Expression Web for Dummies
Microsoft Expression Web For Dummies
ISBN: 0470115092
EAN: 2147483647
Year: 2004
Pages: 142

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net