2016 - 2024

感恩一路有你

如何在Dreamweaver中添加图片热点

浏览量:3613 时间:2024-08-13 15:29:37 作者:采采

在网页设计中,为了让用户更好的体验页面内容,我们需要将一些信息通过图片的方式展现出来。而在这些图片中,有些部分需要加上链接,让用户可以点击跳转到相应的页面。那么如何在DW工具中给图片添加热点呢?下面就来介绍一下。

一、准备一张图片

首先,我们需要准备一张图片,并且确定要给哪些区域添加热点。这个图片可以是公司产品、活动场景等。

二、插入图片

在DW工具中新建一个网页,将之前准备好的图片插入到页面中。

三、找到地图工具

单击鼠标左键点击图片,这时候软件下方的属性面板就会变成和图片相关的属性,注意看左下角部分,可以看到热点地图工具。如果没有显示该工具,可以点击属性面板右侧的三角符号打开。

四、绘制热点

在属性面板中,可以看到方块、圆形、多边形三个小图标,它们就是我们要用的“图片热点”工具,不同的热点工具可以绘制出不同形状的热点区域。

首先点击方块按钮,在你想加链接的地方画一个方块。添加热点后的图片区域会出现一个浅蓝色蒙版,意味着该区域已经添加了热点。依次添加其他区域的热点。

五、给热点添加链接

热点区域画好后,下面的属性面板就会变成该热点区域的属性。在链接栏中输入要跳转的链接地址,同时在目标栏中选择链接打开方式。一般使用“_blank”,指超链接将在新窗口打开。替换项是当鼠标悬浮在该区域时提示的文字。

可以采用画一个区域,添加对应的连接,也可以依次把所有的区域热点画完,然后点击热点区域,依次添加对应的连接。初学者建议一个一个的添加。

六、修改热点

如果需要修改热点区域,或者需要进行微调,可以点击热点区域,热点区域四周会出现浅蓝色的点。光标放在浅蓝色的点,点击鼠标左键,即可调整热点区域的大小。

七、给多个图片添加热点

如果一个页面中有多个图片需要添加热点,那么需要给每一张图片对应的热点设置不同的热点名称。可以使用map1、map2、map3等命名,也可以使用不同图片的内容对热点进行命名,如top_map、foot_map、act_map等。总之,不同图片的热点名称不同即可。

八、热点的原理

图片通过usemap"Map"属性将名称为“Map”的热点区域及连接映射到图片上。热点添加完毕后,查看页面源代码,你会发现在代码最底下多出几行内容,这些就是热点生成的。

一般来说,图片的usermap属性对应的是map热点的name的属性值。所以如果页面中如果有多个图片添加热点,那么每一个图片的usemap值跟对应的热点地图的name值一定要一样,且不同的热点区域name值不可以相同,如果相同,那么图片上的热点区域将会以相同名称的第一个热点区域为准。

总结

在DW工具中添加图片热点,可以让网页中的图片实现交互功能,提高用户体验度。通过以上步骤,你可以很快地完成图片热点的添加,并实现链接跳转等功能。

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。