1 什么是图像映射
所谓图像映射是指在一幅图中定义若干个区域,每个区域中指定一个不同的超链接,当单击不同的区域时便可以跳转到相应的目标页面。
2 创建图像映射
2.1 定义映射区域
定义映射区域使用MAP标记符,在<MAP>和</MAP>之间添加映射区域。添加映射区域使 用AREA标记符。该标记符具有三个基本属性:
href 标识出目标的URL
shape 说明映射区域的形状。取值可是:
  rect 矩形
  circle 圆形
  poly 多边形
  default 整个图像区域 coords 用于标识映射区域的边界。
2.2 对映射区域进行引用
标记了映射区域之后,就可以通过在IMG标记符中使用usermap属性来引用相应的映射信息。
一个完整的图像映射语法如下:
<map name="mymap">
<area href=URL1 shape=rect coords="x1,y1,x2,y2">
<area href=URL2 shape=circle coords="x,y,r">
<area href=URL3 shape=poly coords="x1,y1,x2,y2,...,xn,yn">
</map>
<img src=image_URL usemap=#mymap>//注意名字前面有一个#号。
注意:map标记符中,name属性的取值必须与img标记符中,usemap属性的取值相同,只是usemap属性的值前面多了一个# 。

html语法之--使用图像映射的更多相关文章

  1. Python学习---django之ORM语法[对象关系映射]180124

    ORM语法[对象关系映射] ORM: 用面向对象的方式去操作数据库的创建表以及增删改查等操作. 优点:1 ORM使得我们的通用数据库交互变得简单易行,而且完全不用考虑该死的SQL语句.快速开发. 2 ...

  2. web.xml中的url-pattern映射规则

    Servlet和filter是J2EE开发中常用的技术,使用方便,配置简单.servlet和filter中的url-pattern有一些文章在里面的,总结了一些东西,以免遇到问题又要浪费时间. 一,s ...

  3. HTML与CSS入门——第十一章  在网页中使用图像

    知识点: 1.在网页上放置图像的方法 2.用文本描述图像的方法 3.指定图像高度和宽度的方法 4.对齐图像的方法 5.将图像转换为俩接的方法 6.使用背景图像的方法 7.使用图像映射的方法 11.1 ...

  4. 映射请求到Servlet

    Servlet规范当中对映射请求的描述: 在收到客户端请求时,web 容器确定转发到哪一个Web应用.选择的Web应用必须具有最长的上下文路径匹配请求URL的开始.当映射到Servlet时,URL匹配 ...

  5. MongoDB中的映射,限制记录和记录拼排序 文档的插入查询更新删除操作

    映射 在 MongoDB 中,映射(Projection)指的是只选择文档中的必要数据,而非全部数据.如果文档有 5 个字段,而你只需要显示 3 个,则只需选择 3 个字段即可. find() 方法 ...

  6. 【转】Android-Input 按键字符映射文件&输入设备配置文件

    https://source.android.com/devices/input/key-character-map-files 按键字符映射文件 按键字符映射文件(.kcm 文件)负责将 Andro ...

  7. Servlet映射

    转载自https://blog.csdn.net/xinluke/article/details/51449594 映射请求到Servlet |-- Context Path --|-- Servle ...

  8. ANTLR4权威指南 - 第7章 通过特定应用程序代码解耦语法

    第7章 通过特定应用程序代码解耦语法 到目前为止,我们已经知道了怎么用ANTLR的语法来定义语言了,接下来我们要给我们的语法注入一些新的元素了.就语法本身而言,其用处并不大,因为它只能告诉我们一个用户 ...

  9. Markdown基础语法(上)

    前言 按照官方文档,和根据自己所用和所理解所写 一.标题语法 一级标题最大,六级标题最小 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标 ...

随机推荐

  1. Android中view的事件

    view:top.left.right.bottom,相对于parent的位置参数,获取通过get*()来获取.width=right-left.height=bottom-top.x=left+tr ...

  2. error: undefined reference to `XXX::XXX(type1, ypte2)

    moc_fortunethread.cpp:100: error: undefined reference to `FortuneThread::GetToParentThread(QString, ...

  3. Linux 脚本整理

    本页主要用来记录一点 Shell 脚本. 1. cd - #切换回上一次的路径 这个命令对 cd 频繁的操作很有用 2. sudo !! #授权给上次录入的命令 比如一般非 root 用户在执行 if ...

  4. JS判断终端浏览器类型

    根据终端浏览器类型不懂加载不同的JS或CSS文件 <script> var browser = { versions: function () { var u = navigator.us ...

  5. oracle group by 使用

    SELECT supplier_id, max(evidence_date) AS evidence_date,max(TD_SUPPLIER_EVIDENCE_INFO_ID) AS TD_SUPP ...

  6. Google机器学习教程心得(一)

    Hello world Google Machine Learning Recipes 1 官方中文博客 http://chinagdg.org/2016/03/machine-learning-re ...

  7. Balls Rearrangement(HDU)

    Problem Description Bob has N balls and A boxes. He numbers the balls from 0 to N-1, and numbers the ...

  8. iOS多线程系列(1)

    多线程这个概念的接触是蛮早的时候了,当时还是单核单CPU的时候,Thread这个概念已经出现了,当时比较流行的方案是时间片轮流,线程可以优先级抢占,但一次只能运行一个线程,实际上多线程是不能真正并行处 ...

  9. 收敛 p75

    三种收敛.中心极限定理.大数定理.delta方法

  10. Expect:100-Continue & HTTP 417 Expectation[转]

    Expect:100-Continue & HTTP 417 Expectation 背景:今天调试火车票查询的代码,发现一个奇怪的事情,如果使用公司本地的代理,那么一切正常,如果使用的是公司 ...