![网页设计与网站建设完全实战手册](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=1739528886-jXEjwvtHPZ6IdTBi4uZtoKOB6As0YSu1-0-ec4a1adabc06bbfcf82f17f19c9c7479)
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00295.jpg?sign=1739528886-LTDzhbTHw8Z4H6noNyaW1QBR53MGCXjI-0-cea0ea5e1db2e81b90df42251067c87f)
图7-24 创建热点链接
01 选中要创建热点超链接的图像,如图7-25所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00296.jpg?sign=1739528886-4Zi8rGbCQatrkl9hkfJesqHQX5ur5phh-0-636863db2adfa3ae4493f64083fb1c2d)
图7-25 打开网页文档
02 打开“属性”面板,在面板中选择“矩形热点工具”,如图7-26所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00297.jpg?sign=1739528886-NFQ6LQIRfyBKibRBDNcR8xM16YWwvUut-0-2715bc6cd4fc1f73ba5d416804e5e461)
图7-26 选择“矩形热点工具”
03 在要绘制热点的位置按住鼠标左键拖动,以绘制矩形热点区域,如图7-27所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00298.jpg?sign=1739528886-clr9DX4Fx0vaCWatQH0ftGND87BGfdg3-0-2c8985f7dc9c73371699486854706ad5)
图7-27 绘制矩形热点区域
04 按照步骤02的方法绘制其他的热点区域,如图7-28所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00299.jpg?sign=1739528886-2afdhcetmeudRjEff1IDQYbp5GM2H0im-0-a48e78727c5d423e3212c757293f715f)
图7-28 绘制其他的热点区域
05 保存文档,按F12键,在浏览器中预览,当单击热点超链接时,效果参见图7-24所示。