文章来源于：https://www.cnblogs.com/mq0036/p/3337327.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">

     <title>Document</title>

 </head>

 <body>

     <!--

         <area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。

         <area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。

         <area shape="poligon" coords="x1,y1,x2,y2 ......" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） ......。

     -->

     <!-- img指热点图片，usemap指name为#planetmap的map. area标明具体的地方. coords标明坐标,href则是链接 -->

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

     <map name="planetmap" id="planetmap">

         <area shape="circle" coords="180,139,14" href="venus.html" alt="Venus" />

         <area shape="circle" coords="129,161,10" href="mercur.html" alt="Mercury" />

         <area shape="rect" coords="10,0,110,260" href="sun.html" alt="Sun" />

     </map>

 </body>

 </html>

细节图

HTML图片热区的更多相关文章

  1. [jquery] 图片热区随图片大小自由缩放

    在图片上直接画出带超级链接热区元素map和area相信大家并不陌生,Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具,但是直接绘制的热区是不能随着图片自适应放大和缩小的,现 ...

  2. 图片热区——axure线框图部件库介绍

    首先,我们将图片热区组建拖动到axure页面编辑区域 1. 图片热区为页面图片或者其他部件添加热区,添加交互 我们一般在做专题的时候,会遇到一些组合商品,但是又需要单独分别设置连接,如果是2张图片还好 ...

  3. css移除a标签及map、area（图片热区映射）点击过后的边框

    默认a标签及其包含的html元素和map中的area(图片热区映射)在点击过后留有默认的蓝色边框,如下图 可以看到,蓝色的边框破坏了页面的整体美感,很多时候我们都是不需要的.通过设置相应的css可以去 ...

  4. HTML中图片热区的使用

    在HTML中有一个具有把图片划分成多个作用区域,并链接到不同网页的标记,那就是 <area>地图作用区域标记. <area>标记主要用于图像地图,通过该标记可以在图像地图中设定 ...

  5. js动态改变图片热区坐标，手机端图片热区自适应

    <img id='banner1' src="images/banner.jpg" usemap="#banner" border="0&quo ...

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

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

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

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

  8. 图片热区——map的用法

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

  9. 自定义View实现图片热区效果

    我司主要从事工业物联网领域软件的开发,现有个需求,在外废品处理时需要对产品的不良位置进行标记,点选图片实现图片网格的着色功能. 需求是通过自定义view来实现,实现思路如下: 首先将点击的小方格对象实 ...

随机推荐

  1. Linux忘记Mysql原来root的密码

    Linux忘记Mysql原来root的密码 1.首先需要有linux操作系统root的权限 2.ps aux | grep mysql (或者 systemctl status mysql) 发现my ...

  2. poj 1873（枚举所有的状态+凸包）

    The Fortified Forest Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 6115   Accepted: 1 ...

  3. C#中使用aria2c进行下载并显示进度条

    正则表达式的生成网站: http://www.txt2re.com/index-csharp.php3 Aria2c下载地址: https://github.com/aria2/aria2/relea ...

  4. 如何将django部署从顶级目录迁移到子目录下(NGINX UWSGI DJANGO)

    因为公司网站合并,要将我们的DJANGO项目从IP的顶级目录迁移到域名的二级目录. 以前硬编码的URL可惨了. 还涉及到upload目录,静态目录,websocket目录. 全用{% url %}问题 ...

  5. (20)C#泛型

    泛型的定义:通过参数化类型来实现在同一份代码上操作多种数据类型.泛型编程时一种编程范式,它利用“参数化类型”将类型抽象化,从而实现更为灵活的复用. 优点: 1.省去了拆箱.装箱 2.提高安全性 3. ...

  6. ESXI和vSphere的安装配置-实现一台电脑硬件虚拟化为两台

    本篇文章包含以下几个部分: 1EXSI软件和vSphere软件的安装 2在vSphere上安装虚拟系统 3对虚拟系统通过配置实现硬件虚拟化,实现硬件直通 1.EXSI安装 通过网上下载EXSI ISO ...

  7. Python的网络编程[5] -> BOOTP + TFTP + FTP -> 实现一个简单的文件传输流程

    BOOTP-TFTP-FTP 目录 文件传输流程 服务器建立过程 客户端建立过程 1 文件传输流程 / File Transfer Flow 利用BOOTP,TFTP,FTP三种传输协议,建立起客户端 ...

  8. 用SparkSQL构建用户画像

    用SparkSQL构建用户画像 二.  前言 大数据时代已经到来,企业迫切希望从已经积累的数据中分析出有价值的东西,而用户行为的分析尤为重要. 利用大数据来分析用户的行为与消费习惯,可以预测商品的发展 ...

  9. [JSOI2012]玄武密码

    题目大意: 给定一个目标串$t(|t|\le10^7)$和$m(m\le10^5)$个模板串$s_i(|s_i|\le100)$,对于每个$s_i$,求$s_i$在$t$中出现过的最长前缀. 思路: ...

  10. [LOJ6278]数列分块入门 2

    题目大意: 给你一个长度为$n(n\leq 50000)$的序列$A$,支持进行以下两种操作: 1.将区间$[l,r]$中所有数加上$c$: 2.询问区间$[l,r]$中小于$c^2$的数的个数.思路 ...