例子:

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map
name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

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

<area> 元素始终嵌套在 <map> 标签内部。

注释: <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联,以创建图像与映射之间的关系。

HTML <area> 标签 带有可点击区域的图像映射(图像映射指的是带有可点击区域的图像)的更多相关文章

  1. HTML <area> 标签区域map标签

    1.距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)) <area shape="rect" coords="x1,y1,x2,y2" ...

  2. <area> 标签

    定义和用法 <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像). area 元素总是嵌套在 <map> 标签中. 注释:<img> 标 ...

  3. html area标签详解

    <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像). area 元素总是嵌套在 <map> 标签中. 注:<img> 标签中的 use ...

  4. html area标签 语法

    html area标签 语法 作用:带有可点击区域的图像映射 说明:<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性(由浏览器决定),所以 ...

  5. map+area标签

    map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像,配合area标签 area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域 例:要实现一幅地图上鼠标点击或者 ...

  6. map,area标签

    map,area标签 <img src ="planets.gif" alt="Planets" usemap ="#planetmap&quo ...

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

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

  8. HTML中的map和area标签

    1. 标签介绍: (1)map标签: 该标签是指图片的映射,也就是说一张可以点击的图片的映射: 属性介绍: <1> id: <img>中的 usemap 属性可引用 <m ...

  9. HTML图片热区 map area 标签

    实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...

随机推荐

  1. POJ 1050 To the Max 暴力,基础知识 难度:0

    http://poj.org/problem?id=1050 设sum[i][j]为从(1,1)到(i,j)的矩形中所有数字之和 首先处理出sum[i][j],此时左上角为(x1,y1),右下角为(x ...

  2. LCD驱动 15-3

    测试:1:make menuconfig去掉原来的驱动程序    Device Drivers  --->             Graphics support  --->      ...

  3. linux安装svn服务端不使用apache

    一.安装 1.查看是否安装cvs rpm -qa | grep subversion 2.安装 yum install subversion 3.测试是否安装成功 /usr/bin/svnserve ...

  4. php判断用户浏览器类型是否为微信浏览器

    PHP方法:利用PHP的“_SERVER ”数组“HTTP_USER_AGENT”项,获取该页面的用户代理的信息,来完成这个工作. [winows/chrome] 输出结果: Mozilla/5.0 ...

  5. load image

    <img data-src="/path/to/image.jpg" alt="">img { opacity: 1; transition: op ...

  6. poj1276 多重背包

    //Accepted 1100 KB 47 ms //多重背包 #include <cstdio> #include <cstring> #include <iostre ...

  7. 小米Recovery线刷精灵 v1.0.0 破解版

    下载地址:http://www.crsky.com/soft/75923.html 小米Recovery线刷精灵支持将Recovery线刷包一键刷入小米手机,支持小米所有型号. 小米Recovery线 ...

  8. explain分析查询

    参考以下文章,在此非常感谢原作者 explain分析查询

  9. 2016/7/30 div位置设置,表格大小统一

    在做作业过程中遇到的一些问题和我的总结 1.作业中给出了一张背景图,并让我在背景图中一片区域写内容 我的思路是将一个div放在这片区域,那么问题就是如何定义div的位置和大小 查阅资料后发现并不复杂, ...

  10. iOS App 转移

    此文章只是为了记录一个Apple ID下的APP,转移到另外一个Apple ID 账户下.为了说的清楚下面用A账户(有App,要转出去)B账户(接收A账户App,接收者),来说明. 1.      登 ...