![网页设计与网站建设完全实战手册](https://wfqqreader-1252317822.image.myqcloud.com/cover/459/27110459/b_27110459.jpg)
上QQ阅读APP看书,第一时间看更新
7.4 综合实战——创建图像热点超链接网页
有时候需要在一张图片上设置几个区域,单击图片的不同区域可以进入不同的页面,或者是单击图片的某一块区域进入某一个页面,这就是网页的热点超链接,创建图像热点超链接的效果如图7-24所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0273_0001.jpg?sign=1739299455-XXoAsyPjMMqkZr72KubXCA2LWJq24XvE-0-63937f628910317b154b40334c429129)
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00295.jpg?sign=1739299455-Sx3y5HFYa2B7qNNZwoPNMHLWBSFm6vTI-0-755924ee7c2790a2497d1d2993abdbbe)
图7-24 创建热点链接
01 选中要创建热点超链接的图像,如图7-25所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00296.jpg?sign=1739299455-7W2zBr0BDnFZYAGj5pjlBFfE0MuaMVRY-0-6a0e51deb12d1ba4260560d232627a9a)
图7-25 打开网页文档
02 打开“属性”面板,在面板中选择“矩形热点工具”,如图7-26所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00297.jpg?sign=1739299455-Ew9TAPtzEIbJSTPEyx5Q7ny9CRPgf36R-0-5191ef95ee7a5604f92d672305734a55)
图7-26 选择“矩形热点工具”
03 在要绘制热点的位置按住鼠标左键拖动,以绘制矩形热点区域,如图7-27所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00298.jpg?sign=1739299455-p9pK8xIpnPJJoilEoH7mfFJE1B3VTOI3-0-06b03cec8788e124fe4f95e0128a1874)
图7-27 绘制矩形热点区域
04 按照步骤02的方法绘制其他的热点区域,如图7-28所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00299.jpg?sign=1739299455-P8vn6z2XLwLPyGB0yMEFsUkCbE4hhUWu-0-f595d4ba2df2927895739e4e934dc6fe)
图7-28 绘制其他的热点区域
05 保存文档,按F12键,在浏览器中预览,当单击热点超链接时,效果参见图7-24所示。