1、距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

 2、圆形:(圆心坐标为(X1,y1),半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

 3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
提示:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
附上Maphilight插件的API文档地址http://davidlynch.org/projects/maphilight/docs/在线测试地址:http://www.runoob.com/try/try.php?filename=tryhtml_areamap

HTML <area> 标签区域map标签的更多相关文章

  1. HTML <map> 标签-创建带有可点击区域的图像映射

    定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...

  2. 使用Map标签指定点击区域时的兼容性问题

    电商m站的首页,有一个需求是配一张大的banner图,然后指定某些区域是热区,点击之后跳转到不同的活动页. 听起来简单明了,实现也比较容易,立刻就想起来有个map标签,简直就是为这个需求量身定做. 简 ...

  3. 利用HTML中map标签实现整张图片带有可点击区域的图像映射:

    实现效果说明:一整张背景图片,实现图标区域出现链接,可点击跳转到指定页面. <div class="brand"> <img src="images/b ...

  4. html中map标签和area标签的应用

    map标签的用途:是与img标签绑定使用的,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档. 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name ...

  5. html中map标签和area标签的应用(总结)

    html中map标签和area标签的应用(总结) 一.总结 一句话总结: html中map标签和area标签和组成图片地图,在前端优化中可以减少http请求 1.map标签的用途是什么? 图片地图:是 ...

  6. map标签的详细使用参数

    map标签必须成对出现,即 <map> ....</map> 同时map必须和area配合使用. img标签里的usermap属性值必须与map标签里的id和name值完全一致 ...

  7. 使用area标签模仿a标签

    众所周知,map标签可以给img图像标记热点区域,而area标签就是跟map标签一起使用的. 但area标签的作用可不止用来标记热点,因为它也有href属性,因此某些场景可以代替a标签进行页面跳转. ...

  8. 今天我们谈一下HTML标签中的<map>标签的用法和使用场景

    首先我们看下这个标签到底是干什么的! W3C的定义: 然后兼容性: 然后与之配套使用的另一个标签: <area/>规定其区域: 我们来看看<map>标签支不支持全局属性:=== ...

  9. map标签

    map和area 标签配合img标签制作分区超链接效果 http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

随机推荐

  1. awk常见基本使用

    -F 指定分割符号 print 外层的引号必须是单引号 $n不能被解析 [root@bogon ~]# .txt a:b:c:d a1:b1:c1:d1 a2:b2:c2:d2 a_: :c:dddd ...

  2. java.sql.SQLException: No suitable driver

    java.sql.SQLException: No suitable driver at java.sql.DriverManager.getDriver(Unknown Source) at com ...

  3. zufeoj 花生(The Peanuts)

    花生(The Peanuts) 时间限制: 1 Sec  内存限制: 128 MB提交: 3  解决: 2[提交][状态][讨论版] 题目描述 鲁宾逊先生和他的宠物猴,多多,非常喜欢花生.有一天,他们 ...

  4. PL/SQL 训练07--发现问题

    drop table ma_schedue_task ; ---test_task(:1,:2) create table ma_schedue_task( created_by ) default ...

  5. 解决JAVA_HOME nor the JRE_HOME environment variable is defined

    从别的地方复制了一个tomcat, 启动后一闪即退, 使用记事本打开 startup.bat文件, 在文件底部修改, 并追加如下内容 call "%EXECUTABLE%" run ...

  6. swift(Object Storage对象存储服务)(单节点)

    # 在部署对象存储服务(swift)之前,你的环境必须包含身份验证服务(keystone); # keystone需要MySQL数据库,Rabbitmq服务,Memcached服务; # 内存:4G ...

  7. 使用Selenium对付一个点击游戏

    继续来熟悉Selenium的使用,这次来玩一个Html5游戏.原网址在这:http://tianmaying.com/app/clicking/# 游戏是这样的,5秒内你能点击这个按钮几次.一般人都只 ...

  8. javascript第三节

    面向对象的程序设计 1.属性类型 ECMAScript中有两种属性:数据属性和访问器属性 数据属性: configurable设置为false,表示不能从对象中删除属性. 访问器属性: 支持定义多个属 ...

  9. C# RSA的加解密与签名验证

    最近做了一个CS架构的序列号生成器,用到 RSA加解密技术,以下是RSA的使用方法 RSA加密算法是一种非对称加密算法.在公钥加密标准和电子商业中RSA被广泛使用.RSA是1977年由罗纳德•李维斯特 ...

  10. 「小程序JAVA实战」微信小程序的简要注册流程(二)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-02/ 了解了小程序的历史和它未来的前景,我们开始注册小程序 注册小程序 可以参考官网介绍:http ...