需要在一张图片中,设置一个区域为热点就用到了<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. [Android] android .keystore文件转x509pem工具

    .keystore是android的签名文件,最近在做联通联运的时候,发现他们需要上传x509pem格式的文件来签名所以就研究了一下如何转化 方法一:使用openssl的方法 http://blog. ...

  2. oracle 分析函数的使用(1)

    LISTAGG(columnName,'拼接符') WITHIN GROUP(ORDER BY clause) --order by 子句决定拼接内容的顺序 LISTAGG(columnName,'' ...

  3. mysql metadata lock(二)

    上一篇<mysql metadata lock(一)>介绍了为什么引入MDL,MDL作用以及MDL锁导致阻塞的几种典型场景,文章的最后还留下了一个小小的疑问.本文将更详细的介绍MDL,主要 ...

  4. 编写IoDemo.java的Java应用程序,程序完成的功能是:首先读取text.txt文件内容,再通过键盘输入文件的名称为iodemo.txt,把text.txt的内容存入iodemo.txt

    package zuoye; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExcep ...

  5. Managed DirectX中的DirectShow应用(简单Demo及源码)

    阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...

  6. 如何在开机时让Tomcat以进程的方式启动

    一. 安装tomcat服务 1. 打开cmd命令窗口,进入到"tomcat安装路径/bin"目录下,运行"service.bat install"命令,安装to ...

  7. mysql备份还原

    备份java代码如下: /** * 备份单个数据库 * @param dbName 数据库名称 * @return 备份成功或者失败 */ @Override public boolean backu ...

  8. Centos 7 ASP.NET Core 1.0 Docker部署

    先决条件 64位,内核3.10以上,查看当前的内核版本,打开一个终端使用uname -r显示您的内核版本             安装 sudo yum update     sudo tee /et ...

  9. win7下Qt5使用mysql C++编程配置

    先下载mysql的库文件链接:http://files.cnblogs.com/files/xiaobo-Linux/mysql.zip 把两个文件放入 Qt目录\Qt5.5.0\5.5\mingw4 ...

  10. CentOS 6.4下Squid代理服务器的安装与配置

    一.简介 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去取得网络信息. Squid是一个缓存Internet 数据的软件,其接收用户的下载申请,并自动处理所下载的数据.当一个用 ...