<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。

area 元素总是嵌套在 <map> 标签中。

注:<img> 标签中的 usemap 属性与 <map>  元素 name 属性相关联,创建图像与映射之间的联系。<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性(由浏览器决定),所以我们需要同时向 <map> 添加 id 和 name 两个属性。

案例链接:http://www.w3school.com.cn/tags/tag_area.asp

属性值:

  href : 点击区域跳转的链接。alt : 图片无法正常显示时提示的信息。

  shape & coords:

  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>

html area标签详解的更多相关文章

  1. Meta标签详解(HTML JAVASCRIPT)

    Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...

  2. 网页设计:Meta标签详解

    很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...

  3. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧   ...

  4. 引用 struts2标签详解 - wo的的日志 - 网易博客

    引用 元元 的 struts2标签详解   引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...

  5. html标签详解

    html标签详解   <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...

  6. html标签详解(2)

    http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...

  7. html标签详解(1)

     http标签详解及讲解        1.基础标签 <!DOCTYPE html> <!--表示文本类型--> <html> <!--<html> ...

  8. 转:springmvc常用注解标签详解

    Spring5:@Autowired注解.@Resource注解和@Service注解 - IT·达人 - 博客园--这篇顺序渐进,讲得超级好--此人博客很不错http://www.cnblogs.c ...

  9. embed标签详解

    HTML-embed标签详解 Embed(一).基本语法:embed src=url说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,      Net ...

随机推荐

  1. 矩阵乘法在numpy/matlab/数学上的不同

    数学意义上的矩阵乘法 注意事项: 1.当矩阵A的列数(column)等于矩阵B的行数(row)时,A与B可以相乘. 2.矩阵C的行数等于矩阵A的行数,C的列数等于B的列数. 3.乘积C的第m行第n列的 ...

  2. tomcat常见错误处理

    1 .java.lang.IllegalArgumentException: Document base /XXX/tomcat/webapps/manager does not exist 解决方法 ...

  3. [Leetcode]44.跳跃游戏Ⅰ&&45.跳跃游戏Ⅱ

    跳跃游戏链接 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出 ...

  4. Vue2.5 开发去哪儿网App

    Vue2.5开发去哪儿网App 技术栈和主要框架

  5. Django 模板相关

    Django 模板相关 视图函数只是直接返回文本,而在实际生产环境中其实很少这样用,因为实际的页面大多是带有样式的HTML代码,这可以让浏览器渲染出非常漂亮的页面.目前市面上有非常多的模板系统,其中最 ...

  6. odoo开发环境搭建(三):安装odoo依赖的python包

    odoo开发环境搭建(三):安装odoo依赖的python包 http://www.cnblogs.com/jlzhou/p/5940815.html

  7. 好用的在线工具汇总:Iconfont图标,数据mock,时间函数库,颜色查询 等

    一   时间函数库 ———http://momentjs.com/ 非常全的时间处理函数库,引入使用非常方便. 二   Iconfont———http://www.iconfont.cn/ 各种小图标 ...

  8. Linux发邮件

    一.mail命令 1.配置 vim /etc/mail.rc 文件尾增加以下内容  set from=1968089885@qq.com smtp="smtp.qq.com"set ...

  9. Redis笔记(3)多数据库实现

    1.前言 本章介绍redis的三种多服务实现方式,尽可能简单明了总结一下. 2.复制 复制也可以称为主从模式.假设有两个redis服务,一个在127.0.0.1:6379,一个在127.0.0.1:1 ...

  10. JAVA多态计算面积main函数调用方法

    public static void main(String[] args) { Shape shape; Scanner input = new Scanner(System.in); System ...