图像映射(图像热点)的使用

      工作中有时我们会需要实现这样一个功能:点击一张背景图的一个或多个区域,将跳转到不同的页面,这就是图片热点链接或称之为图像映射。

      举个栗子:

      

		
		
			
			
			
		


      解析:

      1.  shape 定义热点的形状

           shape="circle"  多边形

           shape="rect"    矩形

           shape="poly"    多边形

     2.   coords 定义区域点的坐标

           1) rect   矩形, 规定有四个值,前两个表示左上角的坐标,后两个值表示右下角的坐标值

                 例:

           2) circle 圆形,规定有三个值,前两个数表示圆心坐标,最后一个值表示圆的半径长度

                 例:

           3) poly  多边形(任意图形),规定的值即为图形的每一个转折点的坐标值

                 例:

           

      下面来说下图像热点的原理:

       图片通过 usemap="testmap" 属性将map标签中的id或name属性(取决于浏览器,一般来说图片的usemap值对应的是map热点的name的属性值,设置的时候最好同时向map标签添加id和name属性)关联起来,而area标签指定了图像映射中的区域,shape属性指定了热点形状,coords指定了热点形状的坐标值,以此从而实现图像映射

注意:

      1>如果页面中如果有多个图片添加热点,那么每一个图片的usemap值跟对应的热点地图的name值一定要一样,且不同的热点区域name值不可以相同,如果相同,那么图片上的热点区域将会以相同名称的第一个热点区域为准。

      2>如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。


        鉴于坐标不好计算问题,向大家推荐一个热区工具:http://www.mtmao.com/hot

      

你可能感兴趣的:(图像映射(图像热点)的使用)