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> 标签。
提示和注释:
注释: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
分享到:
相关推荐
通常情况下,`<map>`标签会配合`<img>`标签一起使用,其中`<img>`标签的`usemap`属性值应与`<map>`标签的`name`或`id`属性值相匹配。 ##### 2.2 标签结构 `<map>`标签的基本结构如下: ```html <img src="image....
注意,虽然`<map>`和`<area>`标签在HTML4和HTML5中都有支持,但在HTML5中,`<map>`标签已被推荐用于语义化更好的`<figure>`和`<figcaption>`元素结合使用。例如: ```html <figure> <img src="image.jpg" usemap=...
博文链接提供的资源可能是一个关于如何使用`<map>`标签的实际示例,其中`city_map.gif`可能是包含不同城市区域的静态图像,而`a.html`可能是包含`<map>`标签代码的HTML页面。下面将详细解释`<map>`标签及其相关知识...
在`<img>`标签中使用`usemap`属性来关联图像与对应的`<map>`标签。其值通常是一个以`#`开头的字符串,对应于`<map>`标签中的`name`或`id`属性值。例如: ```html <img src="example.jpg" usemap="#exampleMap" /> ...
1. 使用标准语法:遵循HTML5规范,确保`<map>`和`<area>`标签正确关闭。 2. 兼容旧版浏览器:虽然现代浏览器普遍支持`<map>`和`<area>`,但仍然需要考虑较旧版本的IE。通常情况下,这些浏览器对标准HTML4的支持也很...
它可以与 `<map>` 和 `<img>` 标签结合使用,为图像的不同部分设置链接。 ### <b>: Bold `<b>` 标签用于定义粗体文本。虽然它通常用于强调文本,但在语义上并不强调文本的重要性,仅改变其样式。 ### <base>: ...
它常与 `<map>` 和 `<img>` 标签一起使用。例如: ```html <img src="image.jpg" usemap="#examplemap"> <map name="examplemap"> <area shape="rect" coords="0,0,82,126" href="http://www.example.com/"> </...
* 功能:area 元素总是嵌套在 <map> 标签中。 HTML 字体样式元素 * 定义和用法:<tt>、<i>、<b>、<big>、<small> 均是字体样式元素。 * 功能:<tt> 呈现类似打字机或者等宽的文本效果。<i> 显示斜体文本效果。<b> ...
表单元素如<keygen>用于生成密钥对,<datalist>和它的子标签<options>用于定义可供用户选择的选项列表。 HTML5的文档结构标签包括<!DOCTYPE>、<html>、<head>和<body>,其中<head>用于定义关于文档的信息,如元数据...
在编写HTML代码时,还需注意语义化标签的使用,例如<header>、<nav>、<main>、<article>、<aside>和<footer>,它们有助于提高网页可访问性和搜索引擎理解性。例如,<header>常用于页眉,<nav>用于导航菜单,<main>...
HTML5中新增了一些标签,如`<article>`、`<aside>`、`<audio>`、`<canvas>`、`<video>`等,同时也废弃了一些标签,如`<applet>`、`<basefont>`等。 HTML标签是网页开发的基础,熟悉这些标签的用途和功能是开发网页...
### 图像的影像地图超链接(热点区域),map标签浅谈 #### 一、概述 在Web开发领域,HTML提供了一种独特的功能——通过使用`<map>`标签及其相关属性来实现图像上的热点区域(Hotspots)链接。这种方式不仅能够增强...
【jQuery开发的地图热点特效——Map标签详解】 在Web开发中,地图热点特效是一种常见的交互功能,它可以增强用户体验,使用户能够点击地图上的特定区域获取更多信息或执行特定操作。本篇文章将深入探讨如何利用...
- 描述:HTML文档的根元素,所有的HTML代码都必须放在`<HTML>`标签内。 - 示例: ```html <HTML> <!-- 其他HTML代码 --> </HTML> ``` **2. `<HEAD>`** - 描述:定义了文档头部信息,包括标题、样式表链接、...
本文将深入探讨如何在JSP中将`List`, `Set`, `Map`等集合类型的数据传递到Action,然后再通过`<s:iterator>`标签进行遍历显示。这种方式对于数据的展示和交互具有重要的实践意义。 首先,我们需要了解Struts2的工作...