需要在一张图片中,设置一个区域为热点就用到了<map>

定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

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

<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" style="cursor: pointer" 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>

所有主流浏览器都支持 <map> 标签。

提示和注释:

注释:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

注释:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。

语法

<a coords="value">

属性值

描述
x1,y1,x2,y2 如果 shape 属性设置为 "rect",则该值规定矩形左上角和右下角的坐标。
x,y,radius 如果 shape 属性设置为 "circ",则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn 如果 shape 属性设置为 "poly",则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致,那么为了关闭多边形,浏览器必须添加最后一对坐标。
 
 

HTML <map> 设置图热点的更多相关文章

  1. Mac怎么设置wifi热点

    苹果 Mac 系统中要把无线当作 Wifi 热点来用的话,需要电脑有其它网络接入才可以,也就是说它需要一个可以用于上网的网络,比如有线网络.尤其是对于使用 MacBook Pro 或 MacBook ...

  2. 【转载】华为荣耀V9手机如何设置WiFi热点共享

    有时候我们在电脑的时候发现没有无线网络以及有线网络,如果你的手机有相应网络,并且流量足够(当前很多手机流量套餐都是不限量了),可以开启手机上的Wifi热点进行流量共享使用,开启Wifi流量热点后,电脑 ...

  3. deepin系统下如何设置wifi热点(亲测有效)

    deepin系统下如何设置wifi热点(亲测有效) deepin wifi ap linux 热点 首先必须吐槽一下linux下设置wifi太累了....来来回回折腾了我好久的说.心累... 好了废话 ...

  4. Ubuntu14.04 设置wifi热点

    Ubuntu14.04 设置wifi热点 $ sudo add-apt-repository ppa:nilarimogard/webupd8 $ sudo apt-get update $ sudo ...

  5. Android 解决通过自定义设置打开热点后手机搜索不到热点的问题。

    开发过程中出现了通过自定义设置打开热点后手机搜索不到热点的问题. 后来通过观看  /data/misc/wifi  目录下的  hostapd.conf  文件,发现是 interface=ap0 d ...

  6. 笔记本设置wifi热点并抓包

    现在很多人喜欢蹭wifi热点,这里演示一下怎么利用笔记本设置wifi热点来钓鱼.本机是win10操作系统. 一.设置笔记wifi热点:右键点击右下角网络图标 -> 打开“网络和Internet设 ...

  7. Word 中设置图、表、公式、代码要与正文之间行间距

    一.概述 在撰写论文等文档时,常常对图.表.公式.代码要与正文之间行间距有要求.例如: (5)图.表.公式.代码要与正文之间有6磅的行间距. 二.设置方式 选中 图/表/公式/代码 与 图题/表头/- ...

  8. Android 8.1 自定义热点的时候设置了热点maxLength="32",但是在希伯来语等状态下还是发现在没到32个字符之前就无法把热点设置成功了

    初步认为应该是与热点名称的字节数有关. 然后开始查看源码. /Settings/res/xml/tether_prefs.xml 中的 <Preference android:key=" ...

  9. Win7下设置WiFi热点

    Win7下设置WiFi热点 今天研究了下Win7设置WIFI热点,Connectify神马的都是浮云~亲測可用,现拿出来分享下~ 1.点击"開始",再点击"执行" ...

随机推荐

  1. TCP/IP 协议难点之一—— IP分片

    1 IP协议简单介绍 就个人而言,网络中,抛开网络安全加密这些,就只单单讨论协议本身,比较难的有三个地方: IP分片与重组 TCP滑动窗口与TCP状态的改变 TCP定时器 其实协议本身根据<TC ...

  2. C++语言-08-命名空间

    概述 命名空间通常作为附加信息来区分不同库中相同名称的函数.类.变量.命名空间的本质是定义一个范围,该范围即为一个上下文,一个上下文中通常不允许出现相同名称的函数.类.变量. 定义 定义格式 普通的命 ...

  3. sqlserver 附加数据库失败,错误提示:5拒绝访问 解决办法

    sqlserver 附加数据库失败,错误提示:5拒绝访问 解决办法 金刚 sqlserver 附加数据库 拒绝访问 今天把项目拷贝到新硬盘里,发现在附加数据库中提示:操作系统错误5:"5拒绝 ...

  4. HTML Basic Document and UML

    HTML Basic Document <html> <head> <title>Document name goes here</title> < ...

  5. 使用iText库创建PDF文件

    前言 译文连接:http://howtodoinjava.com/apache-commons/create-pdf-files-in-java-itext-tutorial/ 对于excel文件的读 ...

  6. 【SQL篇章】【SQL语句梳理 :--基于MySQL5.6】【已梳理:ALTER TABLE解析】

    ALTER TABLE 解析实例: SQL: 1.增加列 2.增加列,调整列顺序 3.增加索引 4.增加约束 5.增加全文索引FULL-TEXT 6.改变列的默认值 7.改变列名字(类型,顺序) 8. ...

  7. Hadoop生态圈以及各组成部分的简介

    1.Hadoop是什么? 适合大数据的分布式存储与计算平台 HDFS: Hadoop Distributed File System分布式文件系统 MapReduce:并行计算框架 解决的问题: HD ...

  8. POI读写Word docx文件

    使用POI读写word docx文件 目录 1     读docx文件 1.1     通过XWPFWordExtractor读 1.2     通过XWPFDocument读 2     写docx ...

  9. Linux rpm 查询

    [root@wang /]# rpm -qa // 查看安装所有包 [root@wang /]# rpm -qa |grep vim // 查询所安装的包 +包名 [root@wang /]# rpm ...

  10. Java基础语法总结1

    一.标识符及字符集 Java语言规定标识符是以字母.下划线"_"或美元符号"$"开始,随后可跟数字.字母.下划线或美元符号的字符序列.Java标识符大小写敏感, ...