需要在一张图片中,设置一个区域为热点就用到了<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. java反射机制一个例子

    import java.lang.reflect.*; public class DumpMethods { public static void main(String args[]) { try ...

  2. js获取url

    location.href 返回完整的url location.origin  返回带协议的主机域名  如http://www.test.com location.pathname  返回url中路径 ...

  3. 【转】简析 .NET Core 构成体系

    前文介绍了.NET Core 在整个.NET 平台所处的地位,以及与.NET Framework的关系(原文链接),本文将详细介绍.NET Core 框架的构成和各模块主要功能,以及如何实现跨平台. ...

  4. MetaWeblog API调用

    http://rpc.cnblogs.com/metaweblog/webenh 在网上闲逛,突然对博客的接口感兴趣,经考察,多数博客都对metaWeblog Api 提供了支持,虽然windows ...

  5. 集合1--毕向东java基础教程视频学习笔记

    Day14 集合框架01 体系概述02 共性方法03 迭代器04 List集合共性方法05 ListIterator06 List集合具体对象特点07 Vector中的枚举 01 体系概述 集合类为什 ...

  6. visual studio生成后调试启动又提示部分项目需要生成问题总结

    长久以来若干个项目都遇到过类似的情形,已经成功生成的项目启动调试或者再生成依然认为部分项目需要生成而不是跳过.总结以往的经验,记录下来,以便大家遇到时处理. 若有多个项目提示需要重新生成,优先检查被依 ...

  7. cdh集群数据恢复

    CDH 数据库 磁盘坏了  所有集群配置 都没了    而且 还没备份  ....    元数据 还在  cdh  软件配置 和  安装软件 不能用了 下载 apache hadoop   重新配置  ...

  8. 最近用Timer踩了一个坑,分享一下避免别人继续踩

    最近做一个小项目,项目中有一个定时服务,需要向对方定时发送数据,时间间隔是1.5s,然后就想到了用C#的Timer类,我们知道Timer 确实非常好用,因为里面有非常人性化的start和stop功能, ...

  9. SQL SERVER 并发【2015.12.16】

    并发控制模型   1.悲观并发控制: A.默认冲突存在,当前进程通过获取当前数据的锁阻止其他进程的访问. B.读与写之间是相互阻塞. 2.乐观并发控制: A.使用行版本控制保持数据被操作前的状态. B ...

  10. HDFS分布式文件系统资源管理器开发总结

      HDFS,全称Hadoop分布式文件系统,作为Hadoop生态技术圈底层的关键技术之一,被设计成适合运行在通用硬件上的分布式文件系统.它和现有的分布式文件系统有很多共同点,但同时,它和其他的分布式 ...