创建图片的热点区域

       在浏览网页时会发现，当单机一张图片的不同区域时会显示不同的链接内容，这就是图片的热点区域。所谓图片的热点区域就是将一个图片划分成若干个链接区域。访问者单击不同的区域会链接到不同的目标页面

       在HTML中，可以为图片创建3中类型的热点区域：矩形、圆形和多边形。创建热点区域使用标记<map>和<area>，语法格式如下

      <img src="图片地址"  usemap="#名称"  />

       <map id="#名称">

                   <area    shape="rect"   coords="10,10,100,100" href="#"/>

                   <area    shape="circle"  coords="120,120,50"  href="#"/>

                   <area    shape="poly"    coords="78,13,81,14,53,32,86,38"  href="#"/>

       </map>

          在上面的语法格式中，有几点需要注意

          (1)要想建立图片热点区域，必须先插入图片。注意，图片必须添加usemap属性，说明该图像是热区映射图像，属性值必须以"#"开头，如#pic。那么上面一行代码可以修改为：<img  src="图片地址"  usemap="#pic"/>

          (2)<map>标记只有一个属性id，其作用是为区域命名，属性值必须与<img>标记的usemap属性值相同，修改上述代码为:<map id="#pic">

          (3)<area>标记主要是定义热点区域的形状及超链接，它有三个相应的属性

                        shape属性，控件划分区域形状，其取值有3个，分别是rect(矩形)、circle(圆形)和poly(多边形)

                        coords属性，控制区域的划分坐标

                                  如果shape属性取值为rect,那么coords的设置值分别为矩形的左上角x、y坐标点和右下角x、y坐标点，单位为像素

                                  如果shape属性取值为circle，那么coords的设置值分别为圆形圆心x、y坐标点和半径值，单位为像素

                                 如果shape属性取值为poly，那么coords的设置值分别为多边形的在各个点x、y坐标，单位为像素

                        href属性是为区域设置超链接的目标，设置值为"#"时，表示为空链接