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

一、准备一张图片。

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

二、插入图片:

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

三、找到地图工具:

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

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

四、绘制热点:

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

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

五、给热点添加链接:

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

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

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

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

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

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

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

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

七、对个图片添加热点:

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

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

八、热点的原理

图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上。

热点添加完毕后,查看页面源代码,你会发现在代码最底下多出几行内容,这些就是热点生成的:

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

(0)

相关推荐

  • Dreamweaver怎么给图片添加热点链接

    很多朋友做前端开发都会用到Dreamweaver软件,这个软件是可视化操作,很方便.下面小编就来演示其方便的一个功能,就是给图片添加热点链接. 操作方法 01 首先打开Dreamweaver CS6, ...

  • 怎么使用mac电脑上的预览工具给图片添加遮罩效果

    在mac电脑上自带的预览工具就可以给图片添加遮罩效果,不需要再去下载图片编辑软件就可以实现,今天就跟大家介绍一下怎么使用mac电脑上的预览工具给图片添加遮罩效果的具体操作步骤.1. 如图,使用预览工具 ...

  • 怎么通过PS剪裁工具给图片添加纯色边框

    PS是现在十分常用的图片编辑软件之一,有些新用户不知道怎么通过PS剪裁工具给图片添加纯色边框,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的PS软件,先导入相关图片, ...

  • 怎样用Photoshop工具给图片添加logo

    用PS工具给图片添加LOGO可以给图片打上专属的烙印,作为区别其它图片的一种手段,或者作为一种企业的标识,下面是步骤. 操作方法 01 打开Photoshop软件,新建画布. 02 制作一个logo. ...

  • 如何使用电脑画图工具给图片添加文字?

    大家都知道我们可以通过电脑自带的画图工具给图片添加文字,但是有时候想调整文字的布局或者方向时就不知道应该如何操作了,接下来笔者将自己的方法介绍给大家...... 操作方法 01 首先,我们点击电脑左下 ...

  • 用PS工具给图片添加LOGO

    应该如何利用PS给图片添加LOGO呢?请看详细介绍 操作方法 01 准备好你的LOGO与想要添加LOGO的目标图片,将这两个图片直接拖入PS中或在PS中选择文件-打开,就可以将两个图片导入到PS中. ...

  • 如何用画图工具为图片添加文字

    最近参加了回享计划,但是和群友交流时,有些朋友表示不太会使用Photoshop处理图片.Photoshop功能固然强大,但是如果只是为了对图片进行简单的处理,就会显得有些大材小用了.下面我来和大家分享 ...

  • 画图工具怎么给图片添加文字?

    画图工具中想要给图片添加文字,该怎么添加文字呢?下面我们就来看看画图工具添加文字的教程. 1.首先点击开始,在开始菜单中找到画图 2.打开画图工具后选择打开你想要输入文字的图片 3.打开图片后选择文字 ...

  • 如何在PPT文档中给图片添加棱台形椭圆的效果

    我们在PPT文档中,可以通过使用图片样式工具给图片添加各种效果,今天就跟大家介绍一下如何在PPT文档中给图片添加棱台形椭圆的效果的具体操作步骤.1. 打开电脑,找到桌面上的powerpoint软件,双 ...