html网页如何给一张图片的局部添加链接功能?

2026-02-27 12:23:35

1、      用Dreamweaver新建一个html网页;

      在网页上方功能栏点击【插入】按钮,选择里面的【图片(Image)】;

html网页如何给一张图片的局部添加链接功能?

html网页如何给一张图片的局部添加链接功能?

2、      弹出窗口后,我们选择需要添加到网页中的图片,点击【确定】;

      这个操作让html网页出现一个图片,我们要为图片的一部分区域添加链接跳转页面功能;

html网页如何给一张图片的局部添加链接功能?

3、      在【设计】模式下,鼠标右键点击网页中的图片,在列表中点击【属性】;

html网页如何给一张图片的局部添加链接功能?

4、      这时候出现图片的【属性】栏,点击【地图】下方的热区工具,用鼠标将图片需要设置链接的范围框巨财出来,示例中选择了【矩形热区工具】;

      然后在属性中找到【链接】字样,将链接地址填写上去,然后保存网页;

html网页如何给一张图片的局部添加链接功能?

html网页如何给一张图片的局部添加链接功能?

5、      保存的网页在浏览器中打开,在设置链接的热区范围内用沫泥鼠标点击,成功跳转即设置完成。

html网页如何给一张图片的局部添加链接功能?

html网页如何给一张图片的局部添加链接功能?

6、注意要点:

      1、html网页设置图片局部链接要利用Dreamweaver的【设计】功能;

      2、设置热区容易重复,要留意代码是否有多行,将多余的热区删除睡倘海;

      3、一张图片内可以设置多个热区链接,注意是否每个热区都成功设置;

      4、上传至网站的html网页,要注意链接地址是否填写正确。

html网页如何给一张图片的局部添加链接功能?

猜你喜欢