<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. IronPython 设置包路径

    C#中添加对python文件或者对python包的引用时出现"no module .."的问题时的解决办法. 对hello.py 做一些简单的修改 添加 import syssys ...

  2. 使用Jenkins搭建持续集成服务

    1. 什么是持续集成 持续集成 (Continuous Integration, 简称 CI) 是软件工程中的一种实践, 用于将开发人员不同阶段的工作成果集成起来, 通常一天之中会进行多次. 持续集成 ...

  3. linux内核设计与实现--从内核出发

    linux内核有两种版本:稳定的和处于开发中的. linux通过一种简单的命名机制来区分稳定的和处于开发中的内核,使用3个或者4个“.”分割的数字来代表不同内核版本. 如:2.6.26.1:第一个数字 ...

  4. 四个排名函数(row_number、rank、dense_rank和ntile)的比较

    排名函数是SQL Server2005新加的功能.在SQL Server2005中有如下四个排名函数: 1.row_number 2.rank 3.dense_rank 4.ntile 下面分别介绍一 ...

  5. hibernate one-to-many many-to-one 双向注解

    建表语句: DROP TABLE IF EXISTS `t_company`; CREATE TABLE `t_company` ( `companyId` ) unsigned NOT NULL A ...

  6. [ZOJ 3839] Poker Face (递归)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3839 题目大意:画脸..每张脸是上一个脸倒过来加上眼睛.. 注意 ...

  7. Maven依赖范围及依赖传递

    一: 依赖范围scope 共5种,compile (编译).test (测试).runtime (运行时).provided.system 不指定,则依赖范围默认为compile. compile:编 ...

  8. 命令行重新安装.net framework

    ①运行cmd ②运行命令: cd c:\\windows\\microsoft.net\\framework\v4.0.30319 ③在上述目录下执行如下命令 aspnet_regiis.exe -i ...

  9. document.styleSheets[0]是个啥

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. MFC学习 socket

    下面未处理异常 tcpserver.cpp #include "WinSock2.h" #include <stdio.h> #pragma comment(lib, ...