<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. 关于gcd函数解最大公约数

    数学知识:由于两个数的乘积等于这两个数的最大公约数与最小公倍数的积.即(a,b)×[a,b]=a×b.所以,求两个数的最小公倍数,就可以先求出它们的最大公约数,然后用上述公式求出它们的最小公倍数.例如 ...

  2. linux下安装easy_install的方法

    python中的easy_install工具,类似于Php中的pear,或者Ruby中的gem,或者Perl中的cpan,那是相当的爽歪歪了如果想使用 如果想使用easy_install工具,可能需要 ...

  3. heredoc和nowdoc的区别

    heredoc使用 <<< EOT 的标示符,而nowdoc使用 <<< 'EOT' 这样的标示符,其中nowdoc是PHP5.3引进的新技术,它包含了heredo ...

  4. CentOS 6.5 网络配置(转载)

    From:http://blog.csdn.net/leave00608/article/details/19814063 1.配置网卡IP地址 vim /etc/sysconfig/network- ...

  5. mac下使用github

    提起github相信大家都不会陌生,在这里就不再赘述了.作为开源代码库以及版本控制系统,使用好了确实会非常受益,再说的势利点,你找工作时给面试官说你经常维护自己的技术博客和github,相信你给他的印 ...

  6. J2EE 和javaweb有区别吗

    java web是java对web开发的一种总和称呼.他是B/S模式,对应的是C/S模式: java ee,又叫j2ee是一种广泛使用的平台,包含了一组协调技术,可显著降低成本以及开发.部署和管理以服 ...

  7. 京东校招笔试(C++方向)编程题

    这次笔试是今年校招我参加的第一次笔试..出了很多状况,基础知识不扎实,导致选择题耽误了太多时间,导致后面的题目没做完,编程题也没有在 时间内写出来,基本没有面试机会了.不过我继续研究第二个编程题,在1 ...

  8. Bmob—移动后端云服务平台

    对于个人或者小团队来说,开发一个有网络功能的游戏是一件不容易的事情,必须掌握一门诸如Java/.net/php这类的服务器开发语言. Bmob云服务方便了开发者.Bmob可以给应用软件快速添加一个安全 ...

  9. 2015 Multi-University Training Contest 6 Cake

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5355 Problem Description There are m soda and today i ...

  10. Android设置透明、半透明等效果

    设置透明效果 大概有三种 1.用android系统的透明效果Java代码 android:background="@android:color/transparent"  例如 设 ...