设为首页 收藏本站
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

【新手教程】如何使用DW工具给图片添加热点基础教程

1115 83789
一、准备一张图片。

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

1.jpg

二、在DW中插入图片:

首先打开DW,新建html文档
新建.png
删掉里面的自动生成的代码,不删也可,在<body></body>中进行一下操作即可!
删掉里面的代码.png
插入,也可直接复制图片空间生成的图片代码到编辑框
插入.jpg
选择本地图片或者网络图片
插入2.jpg
三、找到地图工具:

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

5副本.jpg

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

6副本.jpg

四、绘制热点:

    注意方块、圆形、多边形三个小图标,它们就是我们要用的“图片热点”工具,不同的热点工具可以绘制出不同形状的热点区域。
    先点击方块按钮,将鼠标移动到图片上,这时候鼠标就变成了十字,在你想加链接的地方画一个方块。添加热点后的图片区域会出现一个浅蓝色蒙版,意味着该区域已经添加了热点。依次添加其他区域的热点。

7.png

五、给热点添加链接:

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

13.jpg

“链接”就是点击此处跳转的链接地址;
“目标”就是点击此处时窗口的打开方式;一般使用"_blank",指超链接将在新窗口打开。
“替换”就是鼠标悬浮在该区域时提示的文字。
注:可以采用画一个区域,添加对应的连接,也可以依次把所有的区域热点画完,然后点击热点区域,依次添加对应的连接。初学者建议一个一个的添加。

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

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

七、对多个图片添加热点:


    如果一个页面中有多个图片需要添加热点,那么久需要给每一张图片对应的热点设置不同的热点名称,如图示,地图(M)处的文本框中的字符就是当前热点的名称。
    可以使用map1、map2、map3。。。也可以使用不同图片的内容对热点进行命名,如top_map,foot_map,act_map。。。zidingyi1,zidingyi2,zidingyi3.。。。总之,不同图片的热点名称不同即可。

10副本.jpg

八、热点的原理

    图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上。
    热点添加完毕后,查看页面源代码,你会发现在代码最底下多出几行内容,这些就是热点生成的:
  1. <img src="file:///C|/Users/zhaoshaobo/Desktop/1.jpg" width="750" height="400" border="0" usemap="#Map1">
  2. <map name="Map1">
  3. <area shape="rect" coords="-10,-4,212,287" href="www.mayshy.taobao.com" target="_blank">
  4. <area shape="rect" coords="225,0,435,289" href="#">
  5. <area shape="rect" coords="449,-1,758,402" href="#">
  6. <area shape="rect" coords="1,305,137,400" href="#">
  7. <area shape="rect" coords="151,305,290,404" href="#">
  8. <area shape="rect" coords="301,302,436,404" href="#">
  9. </map>
  10. <img src="file:///C|/Users/zhaoshaobo/Desktop/1.jpg" width="750" height="400" border="0" usemap="#zidingyi">
  11. <map name="zidingyi">
  12. <area shape="rect" coords="-10,-4,212,287" href="#">
  13. <area shape="rect" coords="225,0,435,289" href="#">
  14. <area shape="rect" coords="449,-1,758,402" href="#">
  15. <area shape="rect" coords="1,305,137,400" href="#">
  16. <area shape="rect" coords="151,305,290,404" href="#">
  17. <area shape="rect" coords="301,302,436,404" href="#">
  18. </map>
复制代码

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

装修技术交流①群:326680981(即将满员)②群385402321 ③群170254880
回复

使用道具 举报

该用户从未签到

发表于 2014-6-4 03:46:15 | 显示全部楼层
vb r ,fcrf knx i tdtuthtc
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2014-6-7 16:05:34 | 显示全部楼层
回复才能看
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2014-6-7 16:06:52 | 显示全部楼层
我们到京东里面就只有第一个可以点,其他的不行,本地保存的没问题
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2014-6-7 17:14:58 | 显示全部楼层
飞洒放松as放大司法所
回复 支持 反对

使用道具 举报

签到天数: 368 天

[LV.9]以坛为家II

发表于 2014-6-10 08:22:12 | 显示全部楼层
小六 发表于 2014-6-7 16:06
我们到京东里面就只有第一个可以点,其他的不行,本地保存的没问题

id冲突
装修技术交流①群:326680981(即将满员)②群385402321 ③群170254880
回复 支持 反对

使用道具 举报

签到天数: 2 天

[LV.1]初来乍到

发表于 2014-6-10 14:03:55 | 显示全部楼层
京东新手,多多关照,学习此课程帮助非常大
回复 支持 反对

使用道具 举报

签到天数: 2 天

发表于 2014-6-10 14:18:16 | 显示全部楼层
好好,我要看看看看看看看看
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

最新活动

新品速递

  • 双11banner 动画效果 立体工厂
  • 修改京东后台特效(雪花)模块飘雪的透明度
  • 【轮播/菜单】1920全屏轮播悬浮二级分类菜
  • 【618】官方banner代码特效分享css动画
  • 两图开关灯炫酷边框特效代码分享

新人课堂

小黑屋|手机版|Archiver|
©2015  建缘设计. All rights reserved. ( 冀ICP备13015006号 )  Powered by Discuz X3.2  技术支持:建缘设计  
快速回复 返回顶部 返回列表