如何解决利用map中的area对图片进行映射时，随着图片的大小不断变化，所对应的映射在图片中的相对位置保持不变

当我们在写程序时，希望能够点击图片中的某一个图标时，能够跳转到某一个页面中去，我们可以通过html的map标签来实现，例如：

当用户点击上面红色区域时，便会弹到对应的页面

代码如下（只需要对应的html代码就能实现）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map使用方法</title>

<style>

*{margin:0 auto;padding:0;} //清除默认的边距
</head>
<body>

<img width="500px" heigth="800px" src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />   //在页面中插入一张图片

//添加map标签，并增加一个映射area
<map name="planetmap" id="planetmap">
  <area shape="rect" coords="34,76,94,97" href ="index.html" alt="Sun" />
</map>

</body>
</html>

需要注意的是：图片地址不能写错，并且图片的"usemap"属性值要与map标签中的“id”和“name”的属性值需要保持一致，这样map才知道是哪一张图片在“调用”他，相关的属性使用方法可以访问：http://www.w3school.com.cn/tags/tag_map.asp

不过这样做有一个弊端：如果这张图片的宽高都是变化的，那么这样写就会导致所映射到的区域不会跟随图片的移动而移动，因为area的coords所描述的经纬度是固定的，如果需要映射的区域随着图片大小的不断变化，所对应的相对位置也跟着变化。

那就得考虑图片在不断变化的时候，是什么在变化，找到规律，就能解决问题，图片在变化，无非就是图片的宽高在不断的改变，只要记住一句话：“图片的宽高在变化的同时，其实里面所对应的内容是等比例变化的”，我们假设图片一开始的默认宽高为：w，h（这个是固定的已知变量），这时候的图片当中的某一个点的坐标为：x和y(已知变量)，当图片的宽高发生变化后，这时候的x和y的相对位置也发生改变了，假设我们设这时候的宽高为：W，H（未知变量），所对应的相对坐标为X，Y（我们所要求的值），

根据图片的等比例变化可得：w/W=x/X、h/H=y/Y; 因此此时的相对坐标为：X=(x*W)/w、Y=(y*H)/h

以上的代码便可以写成这样：

HTML代码：

<body>

<img src="img/antique.png" width="100%" height="100%" border="0" usemap="#antique" alt="zscmap" />
</body>

对应的js代码（需要引入jquery文件）：

$(document).ready(function(e){

/*用于设置地图的等比例宽高*/
var W=document.documentElement.clientWidth; /*获取移动设备屏幕或浏览器的宽度*/
var H=document.documentElement.clientHeight; /*获取移动设备屏幕或浏览器的高度*/

//假设已知图片的默认宽高和已知的坐标（34,76）和（94,97）为（设置两个点的原因是因为矩形需要左上角与右下角两个点）：

var w="540px";

var h="850px";

//创建地图的map标签
var zscmap=document.createElement("map"); //创建map
zscmap.setAttribute("id","antique"); //对map添加属性ID
zscmap.setAttribute("name","antique"); //对map添加属性name
document.getElementById("all_id").appendChild(zscmap); //把map对象添加到antique页面的body当中

在map中添加area

var areas=document.createElement("area");
areas.setAttribute("id","id");
areas.setAttribute("alt","alt"); //创建alt属性
areas.setAttribute("shape","rect") //创建属性shape，rect为矩形
areas.setAttribute("href","index.html"); //创建连接
document.getElementById("antique").appendChild(areas); //把area添加到map里面
document.getElementById(x).coords=((34*W)/540,(76*H)/850,(94*W)/540,(97*H)/850); //添加coords属性值，参数值顺序为左上角坐标，右下角坐标

});

本人也是摸爬滚打过来的，中间走了很多弯路，如果有更加有效的方法或者建议，或者有什么不懂的，可以联系本人，相互学习：

QQ:1434475404；龙政名

如何解决利用map中的area对图片进行映射时，随着图片的大小不断变化，所对应的映射在图片中的相对位置保持不变

推荐阅读