adobe dreamweaver cs5 on demand part 28 pot

ptg
174 Chapter 7
Creating Image Map
Hotspots
Create a Client-Side Image Map
Open the Web page with the
image you want to use to create
an image map.
Place the image into the document
that you want to use to create your
image map.
Click the Window menu, and then
click Properties to display the
Properties panel.
Create an image map using the
following tools:
◆ Hotspot Tools. Select the
Rectangular, Oval, or Polygon
hotspot tool, and draw an area
on the selected image (this
area represents the clickable
link area for the visitor).
◆ Pointer Tool. Select the Pointer
tool to select, move, or modify
the hotspot.
Click OK to continue.
Hotspot properties appear in the
Properties panel.
5
4
3

2
1
Image maps are an image that has been sub-divided into regions
(hotspots); when a user hovers and clicks within a hotspot, a prede-
fined action occurs. For example, you could create a map of the United
States with each State as a hot spot; clicking on a specific State would
open another Web page and give you the current weather conditions.
Dreamweaver allows you to create a client-side map, or a server-side
map. Basically, client-side maps store the link information in the HTML
document. Therefore, when a visitor clicks a hotspot in the image, the
command is sent directly to the server. Server-side maps store the
information on the server; while this allows the designer to modify a
server-side map; in reality they're much slower, because every time the
visitor clicks on a hot spot, the browser must go back to the originating
server to map the response. Client-side maps are faster, because the
server does not need to interpret where the visitor clicked. Since, in
most cases, client-side maps are faster, easier for the visitor, and are
supported by almost every browser your visitors are likely to have; it
makes sense to include them into your Web pages.
1
4
2 3
5
From the Library of Wow! eBook
ptg
Chapter 7 Linking Web Pages 175
Enter the link for the active hotspot
into the link box. Alternately, you
can click the Browse For File
button to select the link, or you

can click the Point To File button,
and drag to the link in the Files or
Assets panel.
Click the Target list arrow, and
then select from the following
options:
◆ _blank. Opens the linked page
in a new window.
◆ _parent. Loads the linked
document in the immediate
frameset of the active
document.
◆ _self. Loads the linked
document in the same browser
window (default).
◆ _top. Loads the linked
document in the topmost
window of a frameset.
Enter the alternate text. Used by
reader applications for the visually
impaired, and for text-only
browsers.
Continue using the hotspot tools
until you have completed the
client-side image map.
9
8
7
6
Hotspot

9
8
6
7
From the Library of Wow! eBook
ptg
176 Chapter 7
Modifying Image
Map Hotspots
Modify Image Map Hotspots
Open the Web page with the
image map you want to change.
Click the Window menu, and then
click Properties to display the
Properties panel.
Click the Pointer tool.
Edit an image map using the
following tools:
◆ Select Multiple Hotspots. Press
and hold the Shift key, and then
click each hotspot you want to
select.
TIMESAVER
Press Ctrl+A
(Win) or
A
+A (Mac) to select all
the hotspots.
◆ Move Hotspots. Drag the
hotspot to a new location.

TIMESAVER
Use the arrow
keys to move a hotspot by 1 pixel.
Use the Shift + arrow keys to move
a hotspot by 10 pixels.
◆ Resize Hotspots. Drag a
hotspot selector handle.
◆ Arrange Hotspots. Select a
hotspot, click the Modify menu,
point to Arrange, and then click
Bring To Front or Bring To
Back.
◆ Copy Hotspots. Select the
hotspot you want to copy, click
the Edit menu, click Copy, click
the Edit menu, and then click
Paste.
4
3
2
1
After you create some hotspots in an image map, you can modify them
to create the links you want. Using the Pointer tool in the Properties
panel, you can select one or more hotspots, move a hotspot area to a
new location, resize a hotspot shape, or arrange the stacking order for
overlapping hotspots in an absolutely-positioned element (AP element).
If you want to duplicate a hotspot for use in the same image map or
another one, you can copy and paste it. When you copy an image with
one or more hotspots, the hotspots are copied along with the image.
3

1
4
2
From the Library of Wow! eBook
ptg
Chapter 7 Linking Web Pages 177
A null link is an undesignated link, while a script link executes
JavaScript code or a call to a JavaScript function. A null link is a useful
way to activate a link without specifying a target. You can also use a
null link to attach behaviors to objects or text on a page. A script link is
useful for performing an action, such as performing calculations, with-
out leaving the current Web page.
Creating a Null or
Script Link
Create a Null or Script Link
Open the Web page that you want
to create a link.
Select the text, an image, or an
object you want to use to create a
null or script link.
Click the Window menu, and then
click Properties to display the
Properties panel.
Use the following options to create
a link:
◆ Null. Type javascript:; (the word
javascript followed by a colon,
followed by a semicolon) in the
Link box.
◆ Script. Type javascript: (the

word javascript followed by a
colon) followed by JavaScript
code or a function call. Do not
type a space between the colon
and the code or call.
4
3
2
1
1
4
2
3
Attaching JavaScript Behaviors to Links
There are several commonly used behaviors you can attach to any
link in a Web page. These include Set Text Of Status Bar, Open
Browser Window, and Jump Menu. Set Text Of Status Bar allows you
to display a text message in the status bar, which is useful for
describing a link destination. Open Browser Window lets you to open
a URL in a separate new window. Jump Menu provides a way to edit
a jump menu.
For Your Information
From the Library of Wow! eBook
ptg
178 Chapter 7
As with any design application, things can change; including links. Say
for example, you create a link to a specific site, and the original site
owner changes its address. It's even possible that you created the link
and mistyped the link… surely that could never happen. The good
news is that just like any other computer application, mistakes are rela-

tively easy to correct, and modifying a link is no exception.
Modifying a Link
Modify a Link
Select the link you want to change
in the Design window.
Click the Window menu, and then
click Properties to display the
Properties panel.
Modify the link using the following
options:
◆ Link. Modify the name or path
of the link by changing the link
information, located within the
Link input box. Alternately, you
can click the Browse For File
button, and then locate the file,
or you can click the Point To
File button, and then drag over
to the Files or Assets panel.
TIMESAVER
Right-click the
link, click Change Link, select the
file you want to link to, and then
click OK.
◆ Target. Click the Target list
arrow, and then select from the
following options:
◆ _blank. Opens the linked
page in a new window.
◆ _parent. Loads the linked

document in the immediate
frameset of the active
document.
◆ _self. Loads the linked
document in the same
browser window (default).
◆ _top. Loads the linked
document in the topmost
window of a frameset.
3
2
1
3
1 2
From the Library of Wow! eBook
ptg
Chapter 7 Linking Web Pages 179
Removing a link is a lot easier than creating one. As a matter of fact, it
only takes a second or two of your precious time. There are several dif-
ferent ways to remove a link. You can delete the contents of the Link
box in the Properties panel, use the Remove Link command, or delete
the image or text and the link. Removing an entire link is simple, just
select the graphic, or text that represents the link, and then press the
Backspace (Win) or Delete (Mac) key.
Removing a Link
Remove a Link
Select the text or graphic that
contains the link.
TIMESAVER
Right-click the

link, and then click Remove Link.
Click the Window menu, and then
click Properties to display the
Properties panel.
Click in the Link box, and then
erase all the text.
The link is now removed.
◆ To prev ent a link er ror, en ter
the # (null) symbol in the Link
box.
3
2
1
1
3
2
From the Library of Wow! eBook