Click the Window menu, and then click Properties to display the Properties panel.. Modifying Image Map Hotspots Modify Image Map Hotspots Open the Web page with the image map you want
Trang 1Creating 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.
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
Trang 2Enter 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
Trang 3Modifying 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.
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
Trang 4A 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
4
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
Trang 5As 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
3
2
1
3
Trang 6Removing 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 prevent a link error, enter
the # (null) symbol in the Link
box
3
2
3
2