大家在打开带有图片的网页时，有时会看到这样的情况：当鼠标指向图片的不同部位时，可以打开不同的超链接，这种技术我们称之为—网页图片热区。
& @- T0 ^8 j1 t' A' X: E# O2 d) R) A5 n9 q. t( m" h
下面我们以Dreamweaver MX和FrontPage 2003为例，来看看网页图片热区的具体建立过程。
/ f% w. m u) @- v& K0 M" D& @
5 O% B5 ], a3 r( k6 ], ~! }* B 一、在Dreamweaver MX中为图片建立热区
1 x; X# V/ o- v, M f6 o# ~! {5 r$ n
1、启动Dreamweaver MX(其他版本请仿照操作)，打开需要建立图片热区的网页文件，选中相应的图片，此时“属性”面板自动切换到“图片属性”状态(如图1)。
4 V7 d! X: z5 Y1 C7 }. z% ^+ m, B/ c4 C* s: Q0 T3 Q
2、选中一种热区类型(如“多边形”)，然后在图片上依次点出一个热区来(参见图1)
, O" `, i2 I# c6 U0 h4 @0 O
5 n4 }$ u$ H' |- ~; C( T2 B, b/ |6 I% H- \6 Y: q
. A: x) @4 _$ t5 e2 v ! t4 _" _* b- K' N0 {% I9 C
5 j6 f, |; ?* ?$ p5 H* z
图1
# Y$ H% c, K$ S5 C) C6 d" H$ {. ^0 }7 o" e6 O) {1 ~
注意：热区相当于是在图片上增加了一个图形层，象调整图片一样，可以通过选择工具调整热区的大小和位置。
1 a* \+ j) k. t
* A; x& C! }& [" m
在一页中有多个图像地图时，要注意不同的地图名字。另外如果不是特别复杂的图形链接时，要尽量少用图像地图来加链接。
; N0 B1 k0 `, o" }# \
{0 }4 g: d% V5 S; y) B) k 3、在“链接”右边的方框中输入要链接的网址(如“http://www.yesky.com”)；在“替代”后面的方框中输入一些说明字符(如“天极网”)；按“目标”右边的下拉按钮，在随后出现的下拉列表中选择一种链接页面的打开方式(如需要让链接的页面在新窗口中打开，就选择“_blank”选项)。
1 T+ q0 @- `- m+ F1 W& _
+ {. H& P' x$ y. t5 n5 ]% N 注意：“替代”方框中输入的字符，在以后浏览网页时，当鼠标指向该热区时，在页面上会显示出该字符(如图2)。
8 q: A, D* v+ Z: ?
7 N. ]$ j: y" F% c5 u, o1 P2 v
; L! t# v' S" O- @; m2 U% e5 \& h
& c1 x6 G4 j& j4 O8 E" A3 V3 O6 f + }/ Y: X9 s E: y6 ?/ Q
+ Q! ], M% b2 c% {6 M3 W# m4 ]图2
4 X# u- R z: b, Z$ Z
c# f& c" W% t0 x 4、重复上述2、3步的操作，在图片的不同部位建立多个热区。
! T& e' G; Q5 P7 O4 X- p0 j3 ]
: n8 \8 H' W# E
二、在FrontPage2003中为图片建立热区 + S8 i2 a8 A( g. u; x8 w6 M
% n9 p' I3 z: [ V- |" N$ D
1、启动FrontPage2003，打开需要建立图片热区的网页文件。
9 O; D% u- K) P! _. n0 N4 T8 Y7 a# F' h
2、执行“视图→工具栏→图片”命令，展开“图片”工具栏(如图3)
! F+ S9 t7 T; @
6 I9 F) L. _, a6 I- j0 H4 b' p0 s+ {& Q
. J& h) N% S/ @
; V$ f+ n6 D! X/ c) e1 y4 u# u# r5 w( {( U6 G; X. G
图3
' h0 D4 {. O5 z( t3 f9 Q* c) `0 t* b( w& C& V: Y. q6 h) }% ?
3、选中一种热区类型(如“长方形”)，然后在图片上拖来出一个热区，此时系统自动弹出“插入超链接”对话框(如图4)。
% g8 g- X# D |& _5 x6 J
: a2 {( A( C L0 y" i) `; _; Q; \ Q$ s. m+ g
0 R1 }# g7 U* V& @% Z; n( s& y8 d
: x5 B. E# A* X& R6 y% C6 S
6 }7 M) q: n0 R图4
3 z0 l* y# e U5 `3 P
8 D. q) c8 W' q
4、在“地址”栏上输入要链接的网址(如“www.yesky.com”)；点击“屏幕提示”按钮打开“设置屏幕超链接提示”对话框(如图5)，输入一些说明字符(如“天极网”)。
/ u3 @ Y. O6 N- K, ]2 l2 f
, l+ G1 ~1 F1 _/ ^# u2 U$ B
$ m9 ?2 Q' u9 H% n
2 H: v% ]/ `* L$ r % o! q4 h& o2 Q
* H+ D, n; \# b, |! R& T
图5
- T' v. W% U1 a/ H- f9 ]+ T. h0 j e r2 G. K% T3 x
注意：此处的“屏幕提示”同Dreamweaver MX“替代”功能一样。
" P8 s }. W, d, `* s( d4 Y& T2 }# n$ e' j1 @) E
4、同理，重复上述3、4步的操作，可以在图片的不同部位建立多个热区。
