<img id='banner1' src="data:images/banner.jpg" usemap="#banner" border="0"/>
<map name="banner" >
<area id='111' shape="rect" coords="x1,y1,x2,y2" href="/swt/">
</map>

<script>
var picw = $("#banner1").width();        /获取图片宽度
var pich = $("#banner1").height();
var x1 = parseInt(picw*0.6421);          /计算出坐标与总长度的商,当做参数
var y1 = parseInt(pich*0.3907);
var x2 = parseInt(picw*0.9343);
var y2 = parseInt(pich*0.5189);
$("#111").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"');    /设置area的坐标
</script>

这样图片就能实现自适应了

js动态改变图片热区坐标,手机端图片热区自适应的更多相关文章

  1. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  2. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  3. JS前端开发判断是否是手机端并跳转操作(小结)

    JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...

  4. js动态改变iframe的高度

    js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%"  height="200"   ...

  5. 手机端图片预览和缩放js

    转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html 1.手机端的图片选择和预览 <input type="file" ...

  6. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  7. js动态改变img元素src在IE无效的问题

    做了个验证码功能,需要做个点击改变验证码图片的功能,使用js改变img的src,代码如下 $("#cerificationCodeImg").attr("src" ...

  8. js动态改变setInterval的时间

    <!DOCTYPE html> <html> <head> <!--meta name="viewport" content=" ...

  9. 手机端图片插件可缩放 旋转 全屏查看photoswipe

    官方介绍PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品 ...

随机推荐

  1. 转-Activity中使用orientation属性讲解及需注意的问题

    http://www.software8.co/wzjs/yidongkaifa/6504.html 今天遇到了一个关于orientation的问题查了点资料记录一下,只有点点滴滴的积累,才能让我们更 ...

  2. web性能 部分

    雅虎34条提高性能的经验 http://www.cnblogs.com/li0803/archive/2009/09/20/1570581.html 减少http请求 1.尽量合并多个css.js文件 ...

  3. mysql特有语法

    1.插入多条记录insert into test.new_table(t1) values('1'), ('2'); 2.复制表结构及数据 create table test.tb2 SELECT * ...

  4. Python快速教程

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 怎么能快速地掌握Python?这是和朋友闲聊时谈起的问题. Python包含的内容 ...

  5. Unable to save settings: Failed to save settings. Please restart IntelliJ IDEA 解决方案

    ubuntu 上 今天安idea 社区版,报这个错, 解决办法. 1 首先删除掉配置目录,例如安装的是idea最新的15.1版本,就删除 .ideaIC这个文件夹,重启解决了 2 而后,不大一会.又开 ...

  6. [Java] 读写字节数据,过滤流DataOutputStream和DataInputStream

    package test.stream; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io ...

  7. PHP中$_FILES的使用及注意事项

    $_FILES: 经由 HTTP POST 文件上传而提交至脚本的变量.类似于旧数组 $HTTP_POST_FILES 数组(依然有效,但反对使用).$_FILES数组内容如下: $_FILES['m ...

  8. poj 1273 (nyoj 323) Drainage Ditches : 最大流

    点击打开链接 Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 49648   Accepte ...

  9. 动手学servlet(四) cookie和session

    Cookie   cookie是保存在客户端的一个“键值对”,用来存储用户的一些信息 cookie的应用: -在电子商务会话中标识用户 -对网站进行定制,比如你经常浏览哪些内容,就展示哪些页面给你 - ...

  10. 简洁之美 -约瑟夫环的python 解法

    问题描述: 约瑟夫环问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到k的那个人出列:他的下一个人又从1开始报数,数到k的那个人又出列:依此规律重复下 ...