Working with Graphics and Tables - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 260

Creating Graphic Hyperlinks
Another common use of graphics is as hyperlinks. You can create a link for an entire
image, or you can divide the image into smaller sections and create a link for each of
those sections.

Linking an Image
The process for creating a graphic hyperlink is similar to the process for creating a text
hyperlink. After you have created a link to a page, you can select it as the link for a
selected graphic using the Link box in the Property inspector. When a graphic is linked,
the border appears as a rectangle around the graphic in the color you set for links in the
page properties (unless the border is 0 pixels).
You will create a graphic link from the NextBest Fest logo to the home page. You won't
see a rectangle around the graphic because you set the border of the NextBest Fest logo
to 0px in the .logostyle style. Using a logo as a link to the home page of a site is a com-
mon convention that the NextBest Fest target audience should be familiar with. You'll
start by creating the link in the about page. Because creating the link does not affect the
appearance of the logo graphic, you won't create a link from the logo on the home page
to itself.

To create a graphic link from the logo to the home page:

◗

1. If you took a break after the previous session, make sure that the NextBest Fest
site is open, the workspace is reset to the default Designer configuration, and the
index.html and about.html pages are open in Design view.

◗

2. In the about.html page, click the NextBest Fest logo to select it.
◗

3. In the Property inspector, next to the Link box, click the Browse for File button
, and then double-click index.html in the Select File dialog box. The link infor-
mation appears in the Link box.

You can also use the
Point to File button in the
Property inspector to link
the selected graphic to
a page.

◗

4. Save the page, and then preview the page in a browser. You will test the logo.
◗

5. Place the pointer over the logo. The pointer changes to .

◗

6. Click the logo . The home page appears in the browser window.
◗

7. Close the browser, and then close the about.html and index.html pages.

Creating an Image Map
In addition to creating a link from an entire image, you can create multiple links from
different areas of an image. An image map is a graphic that is divided into invisible
regions, or hotspots. A hotspot is an area of a graphic that a user can click to cause an
action such as loading another Web page. Image maps are useful when you want to link
parts of a graphic to different pieces of information. In a music festival site, for example,
each stage of the concert venue that appears in an image could be a hotspot so that
when a user clicks a particular stage, the corresponding lineup and schedule information
appears on the screen.