<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. Eclipse下快速打开本地文件插件EasyExplorer(转)

    EasyExplorer  是一个类似于 Windows Explorer的Eclipse插件,它可以帮助你在不退出Eclipse的环境下浏览本地文件系统,类似的插件也有很多,但是本人喜欢使用这个版本 ...

  2. Java多线程之捕获异常

    1.主线程不能捕获到子线程的异常 package Thread.Exection; import java.util.concurrent.ExecutorService; import java.u ...

  3. 更换ubuntu apt-get 源

    为了优化ubuntu软件安装/更新速度,我测试了国内几家apt源的速度,发现北京交大的apt源速度相对最快,然后可以通过以下步骤更新ubuntu源 1) 备份默认的apt源 $ cd /etc/apt ...

  4. spring错误<context:property-placeholder>:Could not resolve placeholder XXX in string value XXX

    spring同时集成redis和mongodb时遇到多个资源文件加载的问题 这两天平台中集成redis和mongodb遇到一个问题 单独集成redis和单独集成mongodb时都可以正常启动程序,但是 ...

  5. Codeforces 626E Simple Skewness 「数学」「二分」

    题意: 给你一堆无序数,寻找它的一个子堆,使得子堆的平均数减中位数最大. 数字的个数n<=2e5 0<=xi<=1e6. 思路: 首先可以证明这堆数一定是奇数个,证明方法是尝试在奇数 ...

  6. java模拟用户登录(排除没有验证码情况下,抓取网页信息)

    import java.io.BufferedInputStream;import java.io.BufferedReader;import java.io.IOException;import j ...

  7. Oracle 删除数据后释放数据文件所占磁盘空间

    测试的时候向数据库中插入了大量的数据,测试完成后删除了测试用户以及其全部数据,但是数据文件却没有缩小.经查阅资料之后发现这是 Oracle “高水位”所致,那么怎么把这些数据文件的大小降下来呢?解决办 ...

  8. Hibernate高级查询QBC条件设置——Restrictions用法 引自:http://www.cnblogs.com/evon168/archive/2010/10/29/1863059.html

    方法说明 方法 说明 Restrictions.eq = Restrictions.allEq 利用Map来进行多个等于的限制 Restrictions.gt > Restrictions.ge ...

  9. [原创]大连sap vt 实习生面试经历

    从决定参加这次面试开始,求职生涯就算是开始了,虽然失败了,但也是亲身体会到了面试的感觉,这次经历也作为第一篇博客. 大连sap的职能是sap的全球技术支持中心和解决方案提供中心.VT项目提供的岗位是技 ...

  10. eclipse 拨打电话、拨号,发短信

    1.拨打电话,拨号 //拨打电话Intent intent = new Intent(); intent.setAction(Intent.ACTION_CALL); intent.setData(U ...