[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" οnfοcus= "this.blur() " >

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

转载于:https://www.cnblogs.com/ShoneH/p/4810625.html

[jquery] 图片热区随图片大小自由缩放相关推荐

php图片合并png保存图片大小,php缩放处理png和jpg图片
本例子介绍使用php自带的GD库对png和jpg图片进行放大和缩小处理 $target_width = 120; //目标图片宽度 $target_height = 150; //目标图片高度 $ta ...
css控制背景图片随div的大小而缩放
在网页布局时我们经常会遇到这样的问题:图片的分辨率是1024*768,在1024*748的屏幕上能显示完整,一旦在800*600的屏幕上是就显示不完整,为了让图片的大小能适应不同的分辨率,可以这样来设 ...
方便、强大的图片批量处理工具IrfanView：缩放、裁剪、做特效、加文字、自由翻转、改文件名...
今天得到一套图,准备发在新区,发现有水印.QQ等,违规的肯定不能发啊(不坑上家,做这个好下家),想着用马赛克或者新水印遮盖,但是发现还不如裁剪一下呢,但是辣么多图片一张一张的裁剪也太慢了,混草榴的技术 ...
jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码上传图片验证 */ function submit_upload_picture() ...
YDOOK : CSS div 设置背景图片大小自动缩放
YDOOK : CSS div 设置背景图片大小自动缩放设置示例: 选择器{width:100%;height:100%;background-repeat:no-repeat:background ...
Java修改图片大小尺寸图片缩放（URL图片和本地图片）
方式一:使用Image.getScaledInstance 使用jdk的awt包下的Image.getScaledInstance实现图片的缩放.好处是无需引入第三方jar,缺点是会稍微有点模糊. 工 ...
android 图片自动裁剪图片大小,android调用原生图片裁剪后图片尺寸缩放的解决方法...
在安卓开发中,如果对拍照后的图片进行图片裁剪,如果是调用系统的裁剪,如下: /* * 裁剪图片 */ private void cropPhoto() { Intent intent = new In ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切，模拟flash头像上传实例...
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
jquery实现点击小图片查看大图片
jquery实现点击小图片查看大图片 PS:绝大部分参考网上的代码,自己进行了部分改善,没使用 $("< img/ >").attr().load(function{} ...

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

[jquery] 图片热区随图片大小自由缩放相关推荐

最新文章

热门文章