如何使用DW工具给图片添加热点

如何使用DW工具给图片添加热点,第1张

一、准备一张图片

准备一张需要给不同区域添加不同热点的图片。

二、插入图片:

打开Dreamweaver,新建一个网页,将图片插入到页面中。

三、找到地图工具:

单击鼠标左键点击图片,这时候软件下方的属性面板就会变成和图片相关的属性,注意看左下角部分,如图一中的红色框内所示。

注:如果没有上图显示的热点地图工具,是地图工具属性隐藏了,可以点击属性面板右侧的三角符号打开,如下图:

四、绘制热点:

注意方块、圆形、多边形三个小图标,它们就是我们要用的“图片热点”工具,不同的热点工具可以绘制出不同形状的热点区域。

先点击方块按钮,将鼠标移动到图片上,这时候鼠标就变成了十字,在你想加链接的地方画一个方块。添加热点后的图片区域会出现一个浅蓝色蒙版,意味着该区域已经添加了热点。依次添加其他区域的热点。

五、给热点添加链接:

热点区域画好后,下面的属性面板就会变成该热点区域的属性,如下图:

“链接”就是点击此处跳转的链接地址;

“目标”就是点击此处时窗口的打开方式;

“替换”就是鼠标悬浮在该区域时提示的文字。一般使用"_blank",指超链接将在新窗口打开。

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

六、修改热点:对热点区域进行拖动或者局部调整

如果需要修改热点区域,或者需要进行微调,如中国地图添加热点,不可能把所有的热点区域都做到刚好覆盖对应的区域,那就需要对已经添加热点的区域进行调整。

点击热点区域,热点区域四周会出现浅蓝色的点。光标放在浅蓝色的点,点击鼠标左键,即可调整热点区域的大小。

七、对个图片添加热点:

如果一个页面中有多个图片需要添加热点,那么久需要给每一张图片对应的热点设置不同的热点名称,如图示,地图(M)处的文本框中的字符就是当前热点的名称。

可以使用map1、map2、map3。。。也可以使用不同图片的内容对热点进行命名,如top_map,foot_map,act_map。。。总之,不同图片的热点名称不同即可。

方法/步骤

1.新建文档里插入准备好的素材图片。

2.选中图片,界面左下角箭头处就是热点工具,有圆形、矩形和多边形几种热点工具。就是可以把热点区域(链接区域)设置为这几种形状。

3.最前面的指针热点工具,是用来修改、移动后面几种热点形状的。如果有画的不好的地方,可以用它修改。

4.选中矩形热点工具,可以看到鼠标变为十字形,在图片需要链接的地方去画图,把内容框起来。

5.框好的区域会有蓝色格子图片显示,蓝色区域都是鼠标点击可以跳转的。

6.在属性面板“链接”里填上链接地址,记得一定是http://开头的格式,否则跳转不到相应网址。

7.浏览时链接区域鼠标经过时显示为手指状态,点击成功跳转。

8.同样的方式,在图片上做圆形、多边形热区链接。

1、打开Dreamweaver软件,插入一张图片ctrl+alt+I。

2、选中图片,这时就会在下面出现关于图片的属性面板,在属性面板的左下角会出现热点工具。选择工具直接在图片上进行绘制。

3、绘制完成后就要进行添加连接的 *** 作即可。

4、添加的链接又有很多种,下面简单的介绍最常用的常用的几种情况。

(1)锚点链接。如果网页添加了锚点并且制作的链接想要链接到锚点上的话就直接在链接地址中输入#加锚点的名即可。

(2)链接到站内网页。做一个网站不可能只做一张网页,肯定会有很多的网页组成一个网站,那么就要向将热点链接到站内的网页上。选择链接地址后面的指向文件,将指针拖动到你要连接的网页上即可。保存,按下F12键进行预览即可。

(3)链接到站外,直接将热点链接到互联网上,可以在链接中直接输入地址就可以了,注意的是地址中一定要与http://开头。输入地址后选择目标的打开方式,然后保存,预览即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11834140.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存