关于图片映射问题的详解

  今天学习的时候碰到了图像映射问题，其实图像映射问题和图像链接很像，只是在图像链接的基础上进行了分区链接，可以理解为在同一个图像上放置了几个不同的链接点，这个要用到的标签有<map>和<area>，基本语法如下：

<img src="URL" usemap="#planetmap" alt="planet" />
<map name="planetmap" id="planetmap">
    <area shape="circle" cooders="180,139,14" href="URL" alt="Venus" />
</map>

1.usemap属性

  <img>中的usemap的名称可以随便取，但是一定要和<map>中的name和id中的名称一样，并且前面还要加一个“#”，这个意思是指usemap通过name或id中的名称进行引用，如果不一致的话，就不能成功引用，也就是说usemap是<img>和<map>之间的桥梁。

  usemap还有一个好兄弟是ismap，这个属性被称为“服务器端”图像映射，用ismap时，当用户将鼠标放在图像的某一个位置时，浏览器会自动的将鼠标所在的位置发送给服务器端；而usemap被称为“客户端”图像映射，它能有效地消除服务器端对鼠标坐标的处理，以及由此带来的网络延迟问题，通过特殊的<map>和<area>标签可以提供一个描述图像中超链接的敏感区域坐标的映射，浏览器会将鼠标在图像上单击时的坐标转换成一种特定的行为，包括我们看到的加载一个新的网页。

  usemap和ismap的区别：

  由于ismap是服务器端的图像映射，所以需要有服务器或者特殊的服务器软件，而usemap就没有那么多要求了，就算在没有网络的情况下也可以进行图像映射。

2.<map>标签中的name和id属性怎么选取？

  由于考虑到浏览器的问题，一般都会将id和name同时写上，id和name中的名称要相同，usemap就是通过他们进行引用

3.shape属性

  顾名思义，shape就是形状的意思，这个形状指的是在图形映射时，鼠标点击的范围的形式，可以是以下几种：

取值	含义
default	规定点击有效区为全部区域
circ	规定点击有效区为圆形区域
rect	规定有效区为矩形区域
poly	规定有效区委多边形区域

 这个属性还比较好理解，主要就是为了划分点击区域，特殊情况就是<map>标签中采用的是“先来先得”的规则，如果要用defult进行全局热点控制，又不想让其他的区域被包括，就要将default放在最后面，这样才能保证其他小的区域也会有效果。

4.cooders属性

  这个属性是用来控制坐标的，而且它的取值形式要看shape取的是什么区域。

如果shape取的是默认值，也就是default，就不用设置坐标值；

如果是矩形的话，就要设置4个值，即cooders="1,2,3,4"，这4个值中前2个指的是左上角的坐标，后面两个指的是右下角的坐标，注意，cooders只在Firefox和Opera中支持使用；

如果是在圆的话，就只用设置3个值，即cooders="1,2,3"，其中前两个值指的是圆心的坐标，后面一个是圆的半径；

如果是多边形的话，就要给出所有转角的坐标。

5.<area>标签一定要嵌套在<map>标签中使用，有几个<area>标签，就把图像分成了几个部分。

关于图像映射的内容就这么多了，其实也不是很难理解，就是usemap的用法有一点儿难以理解，但是用多了就好了。如果想看具体的例子可以去w3school中的HTML图像一节中的把图像转换成图像映射的实例。http://www.w3school.com.cn/tiy/t.asp?f=html_ismap（附上网址）