`

HTML <map> 标签的使用

    博客分类:
  • HTML
阅读更多

HTML <map> 标签

 

定义和用法

定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

实例

带有可点击区域的图像映射:

<img src="planets.jpg" border="0" 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="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

 

 

浏览器支持

所有主流浏览器都支持 <map> 标签。

HTML 与 XHTML 之间的差异

NONE

提示和注释:

注释:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

注释:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。

必需的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性 值 描述 DTD
id unique_name 为 map 标签定义唯一的名称。 STF

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性 值 描述 DTD
name mapname 为 image-map 规定的名称。 STF

标准属性

class, title, style, dir, lang, xml:lang

事件属性

tabindex, accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

 

分享到:
评论

相关推荐

    html map 标签使用

    通常情况下,`&lt;map&gt;`标签会配合`&lt;img&gt;`标签一起使用,其中`&lt;img&gt;`标签的`usemap`属性值应与`&lt;map&gt;`标签的`name`或`id`属性值相匹配。 ##### 2.2 标签结构 `&lt;map&gt;`标签的基本结构如下: ```html &lt;img src="image....

    Html image 标签 配合 map使用

    注意,虽然`&lt;map&gt;`和`&lt;area&gt;`标签在HTML4和HTML5中都有支持,但在HTML5中,`&lt;map&gt;`标签已被推荐用于语义化更好的`&lt;figure&gt;`和`&lt;figcaption&gt;`元素结合使用。例如: ```html &lt;figure&gt; &lt;img src="image.jpg" usemap=...

    HTML map标签

    博文链接提供的资源可能是一个关于如何使用`&lt;map&gt;`标签的实际示例,其中`city_map.gif`可能是包含不同城市区域的静态图像,而`a.html`可能是包含`&lt;map&gt;`标签代码的HTML页面。下面将详细解释`&lt;map&gt;`标签及其相关知识...

    html图像地图map标签的使用

    在`&lt;img&gt;`标签中使用`usemap`属性来关联图像与对应的`&lt;map&gt;`标签。其值通常是一个以`#`开头的字符串,对应于`&lt;map&gt;`标签中的`name`或`id`属性值。例如: ```html &lt;img src="example.jpg" usemap="#exampleMap" /&gt; ...

    html中map热点area的使用全部代码和效果,兼容所有浏览器

    1. 使用标准语法:遵循HTML5规范,确保`&lt;map&gt;`和`&lt;area&gt;`标签正确关闭。 2. 兼容旧版浏览器:虽然现代浏览器普遍支持`&lt;map&gt;`和`&lt;area&gt;`,但仍然需要考虑较旧版本的IE。通常情况下,这些浏览器对标准HTML4的支持也很...

    HTML标签英文单词

    它可以与 `&lt;map&gt;` 和 `&lt;img&gt;` 标签结合使用,为图像的不同部分设置链接。 ### &lt;b&gt;: Bold `&lt;b&gt;` 标签用于定义粗体文本。虽然它通常用于强调文本,但在语义上并不强调文本的重要性,仅改变其样式。 ### &lt;base&gt;: ...

    HTML标签解释大全

    它常与 `&lt;map&gt;` 和 `&lt;img&gt;` 标签一起使用。例如: ```html &lt;img src="image.jpg" usemap="#examplemap"&gt; &lt;map name="examplemap"&gt; &lt;area shape="rect" coords="0,0,82,126" href="http://www.example.com/"&gt; &lt;/...

    HTML 4.01 / XHTML 1.0 参考手册

    * 功能:area 元素总是嵌套在 &lt;map&gt; 标签中。 HTML 字体样式元素 * 定义和用法:&lt;tt&gt;、&lt;i&gt;、&lt;b&gt;、&lt;big&gt;、&lt;small&gt; 均是字体样式元素。 * 功能:&lt;tt&gt; 呈现类似打字机或者等宽的文本效果。&lt;i&gt; 显示斜体文本效果。&lt;b&gt; ...

    HTML5参考手册

    表单元素如&lt;keygen&gt;用于生成密钥对,&lt;datalist&gt;和它的子标签&lt;options&gt;用于定义可供用户选择的选项列表。 HTML5的文档结构标签包括&lt;!DOCTYPE&gt;、&lt;html&gt;、&lt;head&gt;和&lt;body&gt;,其中&lt;head&gt;用于定义关于文档的信息,如元数据...

    (HTMl个人作品)网上书店

    在编写HTML代码时,还需注意语义化标签的使用,例如&lt;header&gt;、&lt;nav&gt;、&lt;main&gt;、&lt;article&gt;、&lt;aside&gt;和&lt;footer&gt;,它们有助于提高网页可访问性和搜索引擎理解性。例如,&lt;header&gt;常用于页眉,&lt;nav&gt;用于导航菜单,&lt;main&gt;...

    HTML标签总结,包含HTML4和HTML5

    HTML5中新增了一些标签,如`&lt;article&gt;`、`&lt;aside&gt;`、`&lt;audio&gt;`、`&lt;canvas&gt;`、`&lt;video&gt;`等,同时也废弃了一些标签,如`&lt;applet&gt;`、`&lt;basefont&gt;`等。 HTML标签是网页开发的基础,熟悉这些标签的用途和功能是开发网页...

    图像的影像地图超链接(热点区域),map标签浅谈

    ### 图像的影像地图超链接(热点区域),map标签浅谈 #### 一、概述 在Web开发领域,HTML提供了一种独特的功能——通过使用`&lt;map&gt;`标签及其相关属性来实现图像上的热点区域(Hotspots)链接。这种方式不仅能够增强...

    jquery开发的地图热点特效-map标签

    【jQuery开发的地图热点特效——Map标签详解】 在Web开发中,地图热点特效是一种常见的交互功能,它可以增强用户体验,使用户能够点击地图上的特定区域获取更多信息或执行特定操作。本篇文章将深入探讨如何利用...

    html标签 HTML学习

    - 描述:HTML文档的根元素,所有的HTML代码都必须放在`&lt;HTML&gt;`标签内。 - 示例: ```html &lt;HTML&gt; &lt;!-- 其他HTML代码 --&gt; &lt;/HTML&gt; ``` **2. `&lt;HEAD&gt;`** - 描述:定义了文档头部信息,包括标题、样式表链接、...

    Struts2 JSP中将list,set ,Map传递到Action然后<s:iterator>遍历(三十五)

    本文将深入探讨如何在JSP中将`List`, `Set`, `Map`等集合类型的数据传递到Action,然后再通过`&lt;s:iterator&gt;`标签进行遍历显示。这种方式对于数据的展示和交互具有重要的实践意义。 首先,我们需要了解Struts2的工作...

Global site tag (gtag.js) - Google Analytics