![网页设计与网站建设完全实战手册](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=1738838670-QFWjeVaTOn1zIjqtdnFmYRYmuGFQtfxP-0-7f0724afb73429ff1635a20e9d82ef0f)
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00295.jpg?sign=1738838670-Wu6SYoEhj0mmX1QSoZKBpsUjh9Vyr8B4-0-07ab92aebe4ca3d6f003af14194a5b55)
图7-24 创建热点链接
01 选中要创建热点超链接的图像,如图7-25所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00296.jpg?sign=1738838670-1rqKBdqidqlmZaXy1w2BV2k0RtqTZ0hf-0-b9f953fa88b53b9f45d5fafda54b50e5)
图7-25 打开网页文档
02 打开“属性”面板,在面板中选择“矩形热点工具”,如图7-26所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00297.jpg?sign=1738838670-gQyi1uZHEqfZ3oyLIym8wQaY68GBVZrR-0-37dc9b90f06179f03a036a7419f1eeb6)
图7-26 选择“矩形热点工具”
03 在要绘制热点的位置按住鼠标左键拖动,以绘制矩形热点区域,如图7-27所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00298.jpg?sign=1738838670-1ZLmZp6RMiZH7P4T9A82RUfdrgG6RT6k-0-409528f6953ab5eb6e12db0d589af9f1)
图7-27 绘制矩形热点区域
04 按照步骤02的方法绘制其他的热点区域,如图7-28所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00299.jpg?sign=1738838670-ivCdD60ybRGr3yY9R2GtzRLzrovDq1To-0-1a366162ddd8f446f1fb3f13883af430)
图7-28 绘制其他的热点区域
05 保存文档,按F12键,在浏览器中预览,当单击热点超链接时,效果参见图7-24所示。