HTML5创建热点区域

（1）要想建立图片热点区域，必须先插入图片。注意，图片必须增 加usemap属性，说明该图像是热区影射图像，属性值必须以“#”开 头，加上名字，如#pic。
HTML5创建热点区域
创建热点区域的基本方法
7
上面的语法格式中，需要注意以下几点: （2）＜map＞标记只有一个属性id，其作用是为区域命名，其设置值必须于＜ img＞标记的usemap属性值相同。
HTML5创建热点区域
31 创建热点区域的基本方法 2 用Dreamweaver精确定位热点区域
创建热点区域的基本方法
3
在浏览网页时，读者会发现，当单击一张图片的不同区域，会显示不同的链 接内容，这就是图片的热点区域。
所谓图片的热点区域就是将一个图片划分成若干个链接区域。 访问者单击不同的区域，会链接到不同的目标页面。
HTML5创建热点区域
创建热点区域的基本方法
8
上面的语法格式中，需要注意以下几点: （3）＜area＞标记主要是定义热点区域的形状及超链接，它有三个必要的属性。
HTML5创建热点区域
创建热
用Dreamweaver精确定位热点区域
10
上面讲述了HTML创建热点区域的方法，但最让读者头疼的就是坐标点的定 位。
对于简单的形状还可以，如果形状较多且复杂，确定坐标点这项工作的工作量 就很大。
因此，不建议使用HTML代码去完成。下面介绍一个快速且能精确定位热点区 域的方法。在Dreamweaver CS 6中可以很方便地实现这个功能。
HTML5创建热点区域
知识点回顾：
11
创建热点区域的基本方法 用Dreamweaver精确定位热点区域
HTML5创建热点区域
创建热点区域的基本方法
4
在HTML中，可以为图片创建3种类型的热点区域： (1) 矩形 (2) 圆形 (3) 多边形
HTML5创建热点区域
创建热点区域的基本方法
5
创建热点区域使用标记<map>和<area>，语法格式如下:
HTML5创建热点区域
创建热点区域的基本方法
6
上面的语法格式中，需要注意以下几点:
案例见HTML5创建热点区域案例.doc文档
HTML5创建热点区域