图片热点链接的设置

图片热点链接的设置

一、热点的原理

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

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

二、要设置图片的热点链接要用到三种标签：<img><map><area>

1、shape：定义热点形状
 

shape=rect： 矩形
shape=circle：圆形
shape=poly： 多边形

2、coords： 定义区域点的坐标

a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">

b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">

c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

三、实例

<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。。。总之，不同图片的热点名称不同即可。