图片热点链接的设置
图片热点链接的设置
图片热点链接的设置一、热点的原理
图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上。
一般来说,图片的usermap属性对应的是map热点的name的属性值。所以如果页面中如果有多个图片添加热点,那么每一个图片的usemap值跟对应的热点地图的name值一定要一样,且不同的热点区域name值不可以相同,如果相同,那么图片上的热点区域将会以相同名称的第一个热点区域为准。
二、要设置图片的热点链接要用到三种标签:<img><map><area>
1、shape:定义热点形状
shape=rect:
2、coords: 定义区域点的坐标
a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
三、实例
<img src="../menu。gif" width="204" height="510" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="12,37,181,88" href="URL1" onFocus="this.blur()"/> <area shape="rect" coords="12,97,182,143" href="URL2" /> <area shape="rect" coords="18,155,179,200" href="URL3" /> <area shape="rect" coords="18,211,182,260" href="URL4" /> </map> /*其中 onFocus="this.blur()" 表示去掉虚线框 */
四、图片的热点链接的设置(使用Dreamweaver)
1、找到地图工具
单击鼠标左键点击图片,这时候软件下方的属性面板就会变成和图片相关的属性,注意看左下角部分,如图一中的红色框内所示。
2、绘制热点:
注意方块、圆形、多边形三个小图标,它们就是我们要用的“图片热点”工具,不同的热点工具可以绘制出不同形状的热点区域。
先点击方块按钮,将鼠标移动到图片上,这时候鼠标就变成了十字,在你想加链接的地方画一个方块。添加热点后的图片区域会出现一个浅蓝色蒙版,意味着该区域已经添加了热点。依次添加其他区域的热点。
3、给热点添加链接:
热点区域画好后,下面的属性面板就会变成该热点区域的属性,如下图:
“链接”就是点击此处跳转的链接地址;
“目标”就是点击此处时窗口的打开方式;
“替换”就是鼠标悬浮在该区域时提示的文字。一般使用"_blank",指超链接将在新窗口打开。
注:可以采用画一个区域,添加对应的连接,也可以依次把所有的区域热点画完,然后点击热点区域,依次添加对应的连接。初学者建议一个一个的添加。
4、修改热点:对热点区域进行拖动或者局部调整
如果需要修改热点区域,或者需要进行微调,如中国地图添加热点,不可能把所有的热点区域都做到刚好覆盖对应的区域,那就需要对已经添加热点的区域进行调整。
点击热点区域,热点区域四周会出现浅蓝色的点。光标放在浅蓝色的点,点击鼠标左键,即可调整热点区域的大小。
5、对多个图片添加热点:
如果一个页面中有多个图片需要添加热点,那么久需要给每一张图片对应的热点设置不同的热点名称,如图示,地图(M)处的文本框中的字符就是当前热点的名称。
可以使用map1、map2、map3。。。也可以使用不同图片的内容对热点进行命名,如top_map,foot_map,act_map。。。总之,不同图片的热点名称不同即可。
热门推荐
- 护卫神系统备份(护卫神主机管理系统怎么用?护卫神主机管理系统使用攻略)
- css怎么快速布局(css重绘与重排的方法)
- mysql多行数据之和(详解MySQL的数据行和行溢出机制)
- mysql数据库三种模式(MySQL数据库是如何实现XA规范的)
- 利用python合并pdf(Python合并同一个文件夹下所有PDF文件的方法)
- python使用什么函数定义匿名函数(Python匿名函数及应用示例)
- mysql数据库数据分析(详解MySQL数据库千万级数据查询和存储)
- python 获取天气预报(详解用python自制微信机器人,定时发送天气预报)
- mysql主从复制时突然来了一批数据(MySQL主从复制断开的常用修复方法)
- sqlparameter的用法介绍