[jquery] 图片热区随图片大小*缩放

在图片上直接画出带超级链接热区元素map和area相信大家并不陌生，Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具，但是直接绘制的热区是不能随着图片自适应放大和缩小的，现在很多网页对浏览器分辨率兼容性要求很高，多数都是用的百分比来定义图片的尺寸，希望图片能随着分辨率的不同，显示设备的不同，自适应的显示最佳效果，这种情况下如何定义图片热区的尺寸可以随着图片一起变化呢？

这是我今天遇到的问题，问了百度个把小时也没有找到答案，忽悠人的错误答案也不少。热区的范围和坐标主要是由area元素的coords属性来决定的，例如下面这行代码

<area shape="rect" coords="338,308,609,589" >

这是一个矩形热区的范围和坐标，你可以看到有四个数字，这四个数字代表的是什么意思呢，前两个数字是矩形热区左上角的点相对于图片总长宽的横坐标和纵坐标，后面两个数字是矩形热区右下角的点相对于图片总长宽的横坐标和纵坐标。网上有的说，如果图片是用百分比来定义的话，这四个数字也用百分比定义应该就可以吧，很遗憾不行，这地方貌似只能是纯整数的数值方能起效果，加个“%”符号都不起任何作用了。想不通百度贴吧里居然还有不少答案是说用百分比数值来定义。什么都问百度也不一定都是对的，如果这篇文章是被百度搜出来的，那你一定要耐心的看完。

我们如何定义个热区让它随图片的大小来*缩放呢？不急，只要功夫深，铁杵磨成绣花针，方法总是有的，借助js可以重新定义coords的属性值，让其随着图片的大小来生成新的数值。怎么做？高手应该想到办法了，我这里就只介绍下jquery方法吧。假如我有一张id=pic的图片，宽度是1920，高度是1080，代码如下

<img id="pic" src="pic.jpg" alt="" usemap="#Map" width="1920" height="1080" />
那么绘制一个矩形热区，是可以随着图片大小*缩放的呢，代码参考下面

var picw = $("#pic").width();
var pich = $("#pic").height();
var x1 = parseInt(picw*0.1820);
var y1 = parseInt(pich*0.2955);
var x2 = parseInt(picw*0.3280);
var y2 = parseInt(pich*0.5645);
$(".box").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"')

你一定很奇怪，上面这段代码各个数值都要乘以一个小数是怎么得出来，首先你还是要在原始大小的图片上绘制一个你所需要的矩形范围和坐标，例如下面这行代码

<area shape="rect" coords="338,308,609,589" href="/" class="box" target="_blank" onfocus= "this.blur() " >

然后用所得到的coords属性值对应的去除原始图片的长和宽就获得了当前图片热区范围和位置与原始图片的比例，然后每次都用js获取图片的宽和高来乘以这个比例值就总是可以得到热区相对于图片的真实大小和位置，不管图片怎么变化，热区也会随之改变。建议函数写在onResize的方法里，这样在浏览器人为缩放的时候，图片热区也会随图片变化*变化。