如何添加图片热点超链接

视频12

基本图片超链接是将整个图片添加一个链接地址，而图片热点超链接是普通图片超链接的有力扩展。图片热点超链接可以将一幅图片划分成任意多个区域，不同的区域可以设置不同的超链接，主要用在展示图像热区和图像地图等方面。

本节继续以“LM的站点”为例，创建一个图片热点超链接网页，介绍设置网页图片热点超链接的方法和技巧。

步骤1　接上例。使用鼠标右键单击“MyWebsite”站点列表项的根文件夹，选择弹出快捷菜单中的【新建文件】命令，将“untitled.html”默认的文件名改为“major1.html”，按回车键确认修改，将major.html网页中的所有内容复制到major1.html中，如图2-4-18所示。

步骤2　使用鼠标双击“major1.html”文件，光标移至网页的第一行处，点击【插入】菜单【布局对象】列表项中的【AP Div】命令，在网页中出现矩形框，该框是一个div元素，它的功能相当于一个可以任意拖动位置的容器，如图2-4-19所示。

步骤3　在【设计视图】中用鼠标选中“AP Div”矩形框，然后在右侧的【CSS样式】面板中点击【当前】按钮，在属性框中分别添加相应属性和对应参数，其中，position属性的作用是让“AP Div”元素固定定位在浏览器的某个位置，如图2-4-20和图2-4-21所示。

图2-4-18　创建网页

图2-4-19　【插入AP Div】

图2-4-20　【CSS样式】面板

图2-4-21　AP Div属性

步骤4　鼠标移到“AP Div”中闪烁，然后点击【插入】菜单中的【图像】命令，选择“images”文件夹中的“major.jpg”文件，如图2-4-22所示。

图2-4-22　插入图片

步骤5　使用鼠标点击图片，下面是图片的【属性】面板，如图2-4-23所示。

图2-4-23　【图片属性】面板

图2-4-24　绘制热点区域

提示说明：图片【属性】面板中的热点区域工具有4种，如表2-4-2所示。

表2-4-2　热点区域工具

步骤5　在当前绘制的“汉语国际教育”热点区域【属性】面板中的【链接】输入框中输入“#汉语国际教育”，目标选择“_blank”，如图2-4-25所示。

图2-4-25　设置热点区域属性

图2-4-26　浏览效果

图2-4-27　热点链接(www.xing528.com)

本节介绍了超链接的功能，读者可以按照要求完善个人主页，具体如下：

1.为网页实现文本和图像的超链接。

2.在网页中创建锚记来丰富网页效果，使浏览者更好地访问你的个人主页。