使用背景

在把设置图转成页面的时候,时常会遇到这种情况:一张小图片上有好多个可以点击的小图标,按常规的处理方法是把这一个一个的小图切出来,然后每个加个a标签进行跳转,但是这样会非常的浪费时间,而且会增加页面图片的数量,拖慢页面的加载速度,所以下面我们就以这张图片为例,在上面3个小图片上加map跳转。

map-area的使用

在img标签有一个usemap的属性,值为map的id或者name,带有map的图片形式:

<img src="abc.jpg" alt="abc" usemap="#myMap">

map和area标签

     <map name="myMap" id="myMap"><br>  
<area shape="rect" coords="75, 0, 336, 148" href="http://www.baidu.com" target="_blank" alt="baidu">
  <area shape="rect" coords="370, 0,610, 148" href="http://www.google.com" target="_blank" alt="google">
</map>
  • map有id和name属性,最好把id和name属性都写上,这样有更好的兼容性。
  • area的shape属性,为好多的值,其中最常用的是rect(矩形)和circ(圆形)
  • area的href属性,就是点击要跳转的目标地址
  • area的target和alt属性,和<a>属性一样,不多说
  • area的coords属性,表示矩形左上角和右下角这两点的坐标,我们就以上图为例,看下怎么算坐标

计算坐标

首先我们打开photoshop,我用的是photoshop cc,快捷键ctrl+r(mac下为command+r)打开标尺

我们可以通过红色方框的位置就是我们需要的2个点,通过标尺线我们就可以得到对应的坐标(75,0,336,148)。

能过这种方法能够精确的得到坐标,如果要想不是特别精确的取坐标,我们可以通过QQ的截图工具来取,这里不再演示了!

摘自:http://www.cnblogs.com/sunhk/p/4524395.html

HTML的map-area的使用的更多相关文章

  1. 如何为图片添加热点链接?(map + area)

    所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能跳转到相应的页面,而无需点击整个图片才能跳转. 说到图片热点链接,我首先想到了map + area, ...

  2. 谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

    说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象.也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素. 常见的有:<br>,< ...

  3. Can't find kernel text map area from kcore

    kernel : 4.9.51kexec-tools : 2.0.4 1.~ # ./kexec -p /boot/vmlinuz --initrd=/boot/initrd --command-li ...

  4. HTML图片热区map area的用法

    <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: < ...

  5. [转]如何为图片添加热点链接?(map + area)

    原文地址:https://www.cnblogs.com/jf-67/p/8135004.html 所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能 ...

  6. HTML图片热区 map area 标签

    实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...

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

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

  8. map+area标签

    map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像,配合area标签 area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域 例:要实现一幅地图上鼠标点击或者 ...

  9. 详细解读html中的Map,area标签

    一.定义 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 二.使用 <!--定义一个图像 他的边框为0(border) usemap(指定该图像被用作图像地图 ...

  10. HTML图片热区map area的用法(转)

    <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: 1 & ...

随机推荐

  1. 开源且功能强大的C# 扩展方法类库Pure.Ext,包含1000+个拓展方法 (支持.Net Framework和.Net Core)

    先上地址 Github: https://github.com/purestackorg/pure.ext Gitee: https://gitee.com/purestack/pure.ext 扩展 ...

  2. SHT20 IIC 寄存器概述

    ** 注:部分内容来自SHT20芯片手册翻译 ** 1.寄存器列表 名称 指令(bin) 寄存器内容(hex) 主机模式(Trigger T measurement hold master) 1110 ...

  3. PHP/ThinkPHP5 框架集成微博登录入库流程示意

    PHP/ThinkPHP5 框架集成微博登录入库流程示意 第三方登陆这个东东,目前主要是 微信.微博.qq.淘宝.支付宝 等几个.他们都是基于oath2协议的.原理差不多.这里记录的是我测试的新郎微博 ...

  4. [TJOI2013]攻击装置(网络流,最小割)

    前言 网络流被hbx吊起来打 Solution 考虑一下这个走法是不是和象棋中马的走法一模一样(废话) 那么显然我每一次移动是走三次,如果将棋盘二分图染色一下,不就是每一次只能走到另一个颜色的吗? 然 ...

  5. Day 9 作业题(完成)

    # 练习题# 1.整理函数相关知识点,画思维导图,写博客 # 2.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者.'''def func1(argv): f ...

  6. Manacher算法学习笔记

    前言 Manacher(也叫马拉车)是一种用于在线性时间内找出字符串中最长回文子串的算法 算法 一般的查找回文串的算法是枚举中心,然后往两侧拓展,看最多拓展出多远.最坏情况下$O(n^2)$ 然而Ma ...

  7. python 匿名函数 lambda 的使用

    在python中,lambda允许用户快速定义单行函数,当然用户也可以按照典型的函数定义完成函数.lambda的目的就是简化用户定义使用函数的过程. In [6]: s = lambda x: x+1 ...

  8. Good Bye 2017(送命场)

    9815人数场,9500+围观神仙打架...断断续续打Codeforces也快有一年啦,第一次打Good Bye场,满怀前排膜tourist的心愿参加了这场送命场,虽然没看到tourist.不过还是得 ...

  9. ElasticSearch的概念解析

    ElasticSearch是面向文档的,它不仅仅可以存储整个对象或则文档(document),还会索引(index)每个文档的内容使它可以被快速的检索.ElasticSearch和关系型数据库的对比如 ...

  10. Elasticsearch安装与环境配置

    Elasticsearch安装与环境配置 确保机器上已经安装了jdk7以上版本 下载:官网下载地址:https://www.elastic.co/downloads/elasticsearch 将下载 ...