http://tomys.win/

  HTML图片热区Area map的用法只是在上学的时候学习到过，在实际工作中一直没用过，如果 不是这次紧急任务，可能永远都不会想起这个功能。在一些特殊的html页面布局中巧用area，能省好多时间，达到事半功倍的效果。

area简介

  • area标记
      主要用于图像地图，通过该标记可以再图像地图中设定作用区域（热点），这样当用户鼠标移到指定作用区域时，鼠标默认会显示成链接样式，点击会自动链接到预设好的页面，或者如果设置了onclick事件，会响应相应的点击事件。
    基本语法结构：demo

    1
    

    2
    

    3
    

    4
    

    5
    

    6
    

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

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

      <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
    

      <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
    

      <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
    

    </map>

  • 用法简介：

    1. 一般 中的 usemap 属性可引用 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 添加 id 和 name 两个属性，以此来表示img与map之前的映射关系。
    2. 总是嵌套在标签中，表示在图像中的映射区域。
    3. shape和coords：shape定义鼠标敏感区域的形状（圆形，矩形，多边形），coords定义敏感区域的坐标。两者结合可以定义敏感区域的位置形状和大小。
    4. href 和 target ：href定义区域的目标链接，target定义何处打开href，方式与中的target用法相同。
    5. area事件：area标签也支持HTML 中的事件属性,比如常见的onclick，onload等事件。

特殊页面巧用area实例

  area通常用在地图应用中，平时很少接触地图项目，所以渐渐快忘记这个标签了。最近的一个突发事件，让我对area的应用有了新的认识。临下班前，老板突然发给我十几个psd文件，让我做成html静态网页，莫说在临下班前写完十几个，写完四五个对我来说也是压力山大啊（ps：我已经将近两年没写过html页面了，这两年一直在做iOS），而且老板说了，要快！仔细研究了这些页面，虽然量大，但是大部分都是展示，只有少数几个地方需要点击跳转或者填写内容，那么对于这种主要作为展示又只是有少量点击功能的页面可以用area热点来快速实现。

  图1中有三个点击部分（红色标注），图2中有三个点击部分，其实这些布局用普通的html布局也很好实现，只是当需要在短时间内实现十多个这种界面，用点儿特殊的技巧可以快速满足要求。
  首先用photoshop等psd处理工具，标注出要点击部分（红色标注）的左上角和右下角的坐标生成如下代码（以图1为例）。

1


2


3


4


5


6


7


8


9


10


<body>


	<div class="div1">


		<img id="tpy1" src="img/tpy01.jpg" usemap="#qcg01">


		<map name="qcg01" id="qcg01">


 		 <area  id="area1" shape="rect" href="02222.html" alt="我要成为特派员" />


		 <area id="area2" shape="rect" coords="212,575,312,616" href="02.html" alt="我要成为轻出者" />


		 <area id="area3" shape="rect" coords="145,635,242,664" h 大专栏  html｜Arearef="info.htm" alt="啥是轻出国管培生" />


		</map>


	</div>


</body>













1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18






html,


body {


	height: 100%;


}




.div1 {


	height: 100%;


	position: relative;


	float: left;


	left: 50%;


}




.div1 img {


	height: 100%;


	position: relative;


	left: -50%;


	display: block;


}

  初看，基本符合要求，好像大功告成了，但是由于img的宽高不是原始值，而是根据浏览器的大小变化而变化的，所以，如果仅仅这样写，用到不同大小的浏览器上，点击的区域是值是写死的，所以最终效果不通用

html｜Area的更多相关文章

  1. 【独家】硅谷创业公司在中国常跌的五个坑｜禾赛科技CEO李一帆柏林亚太周主题演讲

    [独家]硅谷创业公司在中国常跌的五个坑|禾赛科技CEO李一帆柏林亚太周主题演讲 李一帆 Xtecher特稿作者 关注  Xtecher推荐   演讲者:李一帆   翻译:晓娜   网址:www.xt ...

  2. 【PTA｜Python】浙大版《Python 程序设计》题目集：第二章

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  3. [转]NopCommerce How to add a menu item into the administration area from a plugin

    本文转自:http://docs.nopcommerce.com/display/nc/How+to+code+my+own+shipping+rate+computation+method Go t ...

  4. ASP.NET MVC系列：Area

    1. Area简介 ASP.NET MVC Area机制构建项目,可以将相对独立的功能模块切割划分,降低项目的耦合度. 2. Area设置Routing 新建Admin Area后,自动创建Admin ...

  5. Web API项目中使用Area对业务进行分类管理

    在之前开发的很多Web API项目中,为了方便以及快速开发,往往把整个Web API的控制器放在基目录的Controllers目录中,但随着业务越来越复杂,这样Controllers目录中的文件就增加 ...

  6. MVC View中获取action、controller、area名称

    获取控制器名称: ViewContext.RouteData.Values["controller"].ToString(); 获取Action名称: ViewContext.Ro ...

  7. [LeetCode] Rectangle Area 矩形面积

    Find the total area covered by two rectilinear rectangles in a2D plane. Each rectangle is defined by ...

  8. 如何在Linux上使用文件作为内存交换区(Swap Area)

    交换区域(Swap Area)有什么作用? 交换分区是操作系统在内存不足(或内存较低)时的一种补充.通俗的说,如果说内存是汽油,内存条就相当于油箱,交换区域则相当于备用油箱. Ubuntu Linux ...

  9. MVC 添加Area

    在MVC项目中经常会使用到Area来分开不同的模块让项目结构更加的清晰. 步骤如下: 项目 –> 添加 -> 区域 ( Area ) 输入 Admin 添加成功后 Area包含: 创建一个 ...

随机推荐

  1. 【2】从零认识中心极限思想-e往无尽

    目录 e往无尽 单调性.有界性 \(e^{-x^2}\)的积分性质 函数列的近似 傅里叶的方案 三角函数系的正交性 傅立叶展开 傅立叶展开式的指数形式 e往无尽 无论是学高数,还是学习数分,我们在讲到 ...

  2. ansible批量部署(一)

    自动化运维工具shell脚本/Ansible(无客户端)/Saltstack(master-minion) 回顾服务器部署的流程:买云主机->环境部署->软件部署->配置部署-> ...

  3. gMIS吉密斯十年执念：Lower Costs较低成本Better Productivity较高效率

    Hello 2020! 元旦快乐!今起揭开21世纪20年代的篇章. 1. gMIS吉密斯十周年 2010-2020,十年转眼已成历史,gMIS吉密斯——通用管理信息系统(general Managem ...

  4. [APIO2016]Gap（交互）

    第一个subtask应该还是很送分的,就是每次询问两端值的大小,(N+1)/2次即可. 考虑第二个subtask,首先还是先把最小值和最大值询问出来,然后发现不需要询问每一个数,直接将[l+1,r-1 ...

  5. NLP-文本分类之开始(0)

    转眼读研一年了,开题也开了,方向也定了,大方向就是NLP,然而从一开始的上课.做项目开题什么的(自己也比较贪玩,以前不打游戏,结果王者上瘾了),到现在对NLP是一知半解,不对,半解都没有半解,然后时间 ...

  6. Nginx_配置文件解读及模板

    Nginx 介绍 # nginx的最大优势在于处理静态文件和代理转发功能,支持7层负载均衡和故障隔离. 动静分离是每个网站发展到一定规模之后必然的结果.静态请求则应当最好将其拆分,并启用独立的域名,既 ...

  7. Sqlite教程(4) Activity

    之前我们已经有了DbHelper.Data Access Object.Configuration. 那麽现在就是由Activity去创建它们,然後就可以存取Sqlite. 架构图表示了它们的关系. ...

  8. 使用java获取手机号归属地等信息httpClient实现

    java获取手机号归属地 一般想获取手机号归属地等信息个人是无法获取的,但是可以通过调用第三方接口获取,具体百度搜索很多这里例子提供一个淘宝的接口 ,该功能已经发布到网站作为一个在线小工具,拿走不谢: ...

  9. xcode7 上传APPStore错误ERROR ITMS-90474： iPad Multitasking support requires these orientations

    在使用Xcode7 上传AppStore时候发现ERROR ITMS-90474错误.报错描述如下: ERROR ITMS-90474: “Invalid Bundle. iPad Multitask ...

  10. [LC] 451. Sort Characters By Frequency

    Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...