文章来源于：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. tips 前端 移动端 web iscroll 5 自译文档 api速查

    iscroll 可以做的 1,模拟原生的ios 或者android等设备的元素滚动,app里的那种顺滑的滚动,仅仅使用一个轻量的js库实现(甚至更酷炫的视觉感受) 2,手机端流行的下拉刷新,ajax异 ...

  2. C语言.c和.h

    简单的说其实要理解C文件与头文件(即.h)有什么不同之处,首先需要弄明白编译器的工作过程,一般说来编译器会做以下几个过程:       1.预处理阶段 2.词法与语法分析阶段 3.编译阶段,首先编译成 ...

  3. 汕头市队赛SRM15

    T1——czl SRM 15 众所周知,czl家养了一只可♂爱的***(已屏蔽),那只东西很贪吃,所以czl家很多零食仓库,然而这些仓库里有很多老鼠. 为了心爱的***,czl决定点燃纯艾条,用烟熏老 ...

  4. 百度之星初赛（A）——T2

    数据分割 小w来到百度之星的赛场上,准备开始实现一个程序自动分析系统. 这个程序接受一些形如x_i = x_jx​i​​=x​j​​ 或 x_i \neq x_jx​i​​≠x​j​​ 的相等/不等约 ...

  5. 洛谷 P2715 约数和

    给出a和b求a^b的约数和. 题目描述 输入输出格式 输入格式: 一行两个数a,b. 输出格式: 一个数表示结果对 9901 的模. 输入输出样例 输入样例#1: 2 3 输出样例#1: 15 说明 ...

  6. [ CodeVS冲杯之路 ] P3145

     不充钱,你怎么AC? 题目:http://codevs.cn/problem/3145/ 经典的汉诺塔问题 我们移动的时候,如果是最小的1号就可以直接移动,否则先将上面的x-1号先移动到借用塔上,然 ...

  7. loj 数列分块入门 6 9(区间众数)

    6 题意 给出一个长为\(n\)的数列,以及\(n\)个操作,操作涉及单点插入,单点询问,数据随机生成. 题解 参考:http://hzwer.com/8053.html 每个块内用一个\(vecto ...

  8. Juce之旅-第一个例子（图形窗口）

    以这么说现在的人越来越妖精了,本来软件吗,要的是简单稳定实用,但是看现在的趋势是越来越多人注重界面的美化和和效果.比如IM类软件,QQ,飞信还有土的掉渣的MSN等,前两天看了一下YahooUI,觉得不 ...

  9. 最近有点把b/s架构什么的，和web发展搞晕了，现在来总结总结

    Web是一种典型的分布式应用架构 分布式计算技术的架构:目前成熟的技术包括J2EE, CORBA和.NET(DCOM) 在流行c/s的1992年, OMG组织提出CORBA,很大程度的提高了分布式应用 ...

  10. 虚拟机linux 挂载windows共享目录 给linux的nginx服务器使用

    mount -t cifs -o username=administrator,password=xxxx,file_mode=0777,dir_mode=0777 //192.168.xx.xxx/ ...