Map常识

请自己看吧:http://www.w3school.com.cn/tags/tag_map.asp

Map自适应

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            html,body{padding: 0; margin: 0;}

        </style>

    </head>

    <body>

        <img src="img/img.jpg" border="0" usemap="#planetmap" alt="Planets"  width="100%"/>

        <map name="planetmap" id="planetmap">

            <area shape="rect" coords="130,40,136,60"   id="eye"  href ="#" alt="eye" />

        </map>

        <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>

        <script>

            $("#eye").click(function(){

                alert("眼睛");

            })

            //重新定位map位置

            function rsz(){

                //正常情况下为386尺寸:计算比例

                var bl=$("body").innerWidth()/386;

                var x1=bl*130;

                var y1=bl*40;

                var x2=bl*136;

                var y2=bl*60;

                //重新计算位置

                $("#eye").attr({"coords":x1+","+y1+","+x2+","+y2})

            }

            //窗口宽度改变时执行

            $(window).resize(function() {

                rsz();

            });

            //页面初始化时候执行

            $(function(){

                rsz();

            })

        </script>

    </body>

</html>

html的map自适应的更多相关文章

  1. Saliency Detection via Graph-Based Manifold Ranking

    Saliency Detection via Graph-Based Manifold Ranking https://www.yuque.com/lart/papers 本文不是按照之前的论文那样, ...

  2. A Bayesian Approach to Deep Neural Network Adaptation with Applications to Robust Automatic Speech Recognition

    基于贝叶斯的深度神经网络自适应及其在鲁棒自动语音识别中的应用     直接贝叶斯DNN自适应 使用高斯先验对DNN进行MAP自适应 为何贝叶斯在模型自适应中很有用? 因为自适应问题可以视为后验估计问题 ...

  3. vue echarts map的使用，页面多图动态自适应

    最近在vue中使用echarts时,遇到了一些坑,在此记录一下. 1:echarts map的使用 2:页面多图自适应,只有一个图生效 3:根据设备的dpr,动态的修改了meta标签中的initial ...

  4. java Excel导入、自适应版本、将Excel转成List<map>对象

    转载:http://blog.csdn.net/u012662357/article/details/58593020 最近在web开发中遇到excel批量导入,在网上搜了下很少有将excel直接转成 ...

  5. map元素area热区坐标自适应窗口大小

    业务需求:点击图片热区跳转到不同的链接地址,同时要自适应窗口尺寸的变化. 问题:热区坐标点不会随着窗口调整变化 解决思路:获取初始的坐标点与图片宽高的比例,然后用比例乘以调整后的窗口宽高,就获得了新的 ...

  6. html中map area 热区自适应的原生js实现方案

    在做自适应网页的时候,如果在图片中使用了热区map.图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应.这篇文章就介绍通过原生js来实现:MAP中每 ...

  7. html5在手机端关于 map area中的自适应

    https://github.com/stowball/jQuery-rwdImageMaps用这一个插件可自适应!!!

  8. 锚点自适应 map area coords

    最近做MOBILE的HTML5开发,人体图和页面一样,需要自适应不同的手机屏幕,蛋疼的是coords里面的标记是固定的,图片自适应后,锚点的标记就会产生空白区域,看了下https://github.c ...

  9. R(四): R开发实例-map分布图

    前几章对R语言的运行原理.基本语法.数据类型.环境部署等基础知识作了简单介绍,本节将结合具体案例进行验证测试. 案例场景:从互联网下载全国三甲医院数据,以地图作为背景,展现各医院在地图上的分布图.全国 ...

随机推荐

  1. Scala开发环境搭建与资源推荐

    Scala开发环境搭建与资源推荐 本文介绍了Scala的开发环境,包括SDK.IDE的设置.常用资源列表等.Scala是一门静态语言,很有可能就是Java的继承者. AD: 2014WOT全球软件技术 ...

  2. web开发中的多线程死锁问题，避免死锁

    1.什么是死锁,产生死锁的原因,和产生死锁的必要条件 所谓死锁(DeadLock),是指多个进程或线程在运行过程中因争夺资源而造成的一种僵局,当进程或线程处于僵局时,若无外力作用,它们将无法再向前推进 ...

  3. 【工作笔记三】非常全面的讲解Hosts文件

    原文:http://www.cnblogs.com/zgx/archive/2009/03/10/1408017.html 很奇怪有很多人不知道Hosts是什么东西.在网络病毒日渐盛行的今天,认识Ho ...

  4. requirejs的config及optimizer r.js配置

    1.怎么处理require.js这些不需要被合并的东西 所有appDir中的文件都会先copy到dir文件中,进行压缩,然后根据build.js中的配置进行相应的合并,包括img等:2.样式合并后原来 ...

  5. Bootstrap 图像

    一般的样式 在我们讨论 Bootstrap 3 提供的定义图像样式的特殊的 class 之前,我们将看到 Bootstrap 3 提供的定义图像的一般的样式. img { border: 0; } 这 ...

  6. Vim插件之插件管理器Vundle

    Vim插件之插件管理器Vundle 1.介绍下载 相比Sublime.Text2等现代编辑器,Vim缺乏默认的插件管理器,所有插件的文件都散布在~/.vim下的几个文件夹中,配置Vim的过程, 就是在 ...

  7. CGI杂谈

    CGI是一个连接外部应用程序到信息服务器(比如HTTP或者网络服务器)的标准.一个简单的HTML文档是无交互后台程序,它是静态的,也就是说它处于一个不可变的状态,即文本文件不可以变化.相反地,CGI程 ...

  8. 2013.2.A&&3.A

    半期考之后,磨磨蹭蹭的刷了两套长乐的模拟题[=-=我现在实在是不敢恭维自己的刷题速度]感觉貌似很久没有来这里喂食了,就顺便yy下题解好了 2013.2.A: ice :BFS和spfa都可以,我打了个 ...

  9. linux 之 getopt_long()

    文件 #include <getopt.h> 函数原型 int getopt_long(int argc, char * const argv[], const char *optstri ...

  10. CSS盒子的浮动

    web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...