使用背景

在把设置图转成页面的时候,时常会遇到这种情况:一张小图片上有好多个可以点击的小图标,按常规的处理方法是把这一个一个的小图切出来,然后每个加个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#: 线程间操作无效: 从不是创建控件“dataGridView”的线程访问它

    最近在修改自动化小工具,用多线程来解决后台拷贝导致WinForm界面卡死的情况,但是遇到过错:线程间操作无效: 从不是创建控件“dataGridView”的线程访问它. 这是因为在多线程程序中,新创建 ...

  2. 数据分析融入至BI工具的新思路

    欢迎访问网易云社区,了解更多网易技术产品运营经验. 很认同一种说法:BI对企业的作用不是BI本身,而是数据本身.那么BI的作用和意义是干什么的呢-是让有意义的数据自己说出自己意义的工具. BI发展至今 ...

  3. 使用session的监听器获取当前在线人数

    1首先在web.xml中配置Session的监听器 2创建监听器并且继承HttpSessionListener 3.在jsp中导入监听器 4.获取当前在线人数 5.配置到公共网络(使用natapp的免 ...

  4. template(定义类的模板关键字)

    template<typename T1> template<class T1> 在一般情况下二者使用方式是一样的,但有一个特例:就是当T1是一个类的时候,而这个类又有子类时候 ...

  5. Windows搭建Nexus3私服

    1. Nexus 简介 Nexus 是一个强大的 Maven 仓库管理器 , 它极大地简化了自己内部仓库的维护和外部仓库的访问 ; 利用 Nexus 你可以只在一个地方就能够完全控制访问和部署在你所维 ...

  6. docker镜像基本操作一

    获取镜像 首先说明一下如何从Docker hub中获取高质量的镜像,从Docker镜像库获取镜像的命令是docker pull .其命令格式为: docker pull [选项] [Docker Re ...

  7. python-xlwt给excel添加样式

    #coding:utf-8import osimport time        import xlwt filename="test_xlwt.xls"if os.path.ex ...

  8. jdbc连接1(可以注入)

    package demo3class; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepa ...

  9. python3中文件操作及编码

    #之前一直没明白文件处理中的w和wb的区别到底是什么,#在看过视频后才知道,原来在linux里面是没有区别的,#但是在windows里面就能够看出区别来了#下面来个例子: with open(&quo ...

  10. 用汇编语言(ARM 32位)编写TCP Bind Shell的菜鸟教程

    用汇编语言(ARM 32位)编写TCP Bind Shell的菜鸟教程 来源 https://www.4hou.com/info/news/9959.html Change 新闻 2018年1月19日 ...