带有可点击区域的图像映射：
<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
area 元素总是嵌套在 <map> 标签中。
注释：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。
<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>
必需的属性
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
属性
值
描述
DTD
| alt |
text |
定义此区域的替换文本。 |
STF |
可选的属性
属性
值
描述
DTD
| coords |
坐标值 |
定义可点击区域（对鼠标敏感的区域）的坐标。 |
STF |
| href |
URL |
定义此区域的目标 URL。 |
STF |
| nohref |
nohref |
从图像映射排除某个区域。 |
STF |
| shape |
|
定义区域的形状。 |
STF |
| target |
- _blank
- _parent
- _self
- _top
|
规定在何处打开 href 属性指定的目标 URL。 |
TF |
分享到：
相关推荐
通过以上方法，你可以创建出兼容所有浏览器的HTML图像映射，利用`<map>`和`<area>`标签为用户提供交互式的图像体验。在实际应用中，可以根据需要调整`coords`和`shape`，以适应任何复杂的图像布局。
注意，虽然`<map>`和`<area>`标签在HTML4和HTML5中都有支持，但在HTML5中，`<map>`标签已被推荐用于语义化更好的`<figure>`和`<figcaption>`元素结合使用。例如： ```html <figure> <img src="image.jpg" usemap=...
HTML的`<map>`和`<area>`标签在所有主流浏览器中都有很好的支持，包括Chrome、Firefox、Safari、Edge和Internet Explorer。 6. **最佳实践** - 为`<area>`标签提供有意义的`alt`属性，有助于无障碍访问。 - 使用...
`<map>`标签用于定义一个客户端图像映射，该映射由多个`<area>`标签组成，每个`<area>`标签定义了图像上的一个可点击区域。通常情况下，`<map>`标签会配合`<img>`标签一起使用，其中`<img>`标签的`usemap`属性值应与...
在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`<map>`中的`<area>`样式，涉及到的技术主要包括JavaScript、HTML5的绘图API以及图像热区技术。接下来，我们将深入探讨这些知识点。 1. **JavaScript绘图API**...
### HTML图像地图(map)标签的使用 ...通过以上介绍，我们可以看出`<map>`和`<area>`标签不仅提供了丰富的功能，还具有良好的兼容性和广泛的适用场景。掌握这些知识点，将有助于开发者创建更加互动和美观的网页。
本文将详细介绍如何使用`<img>`、`<map>`以及`<area>`标签创建图像的热点区域，并探讨其实际应用。 #### 二、基础知识 ##### 2.1 `<img>`标签 `<img>`标签用于在HTML文档中嵌入图像。当结合`usemap`属性使用时，它...
第一个案例演示了如何使用 `<map>` 标签和 `<area>` 标签创建热点区域。源代码如下： ```html <!doctype html> <html> <head> <meta charset="utf-8"> <title>创建热点区域</title> </head> <body> <img src=...
在HTML中，`<map>`元素用来定义图像映射，而`<area>`元素则用于定义映射的各个区域。以下是`<map>`和`<area>`元素的基本结构： ```html <img src="image.jpg" usemap="#mapname" alt="description"> <map name="map...
本篇文章将深入探讨如何利用jQuery和HTML的`<map>`与`<area>`标签来创建这种效果。 1. **HTML的`<map>`标签** `map`标签在HTML中用于定义一个图像映射，即关联一个图像与一系列的可点击区域。这个标签不包含任何...
`<MAP>`和`<AREA>`配合创建图像地图，`<BGSOUND>`和`<EMBED>`处理多媒体，`<MARQUEE>`创建滚动文本（仅IE支持），`<BLINK>`实现闪烁效果（已过时），`<ISINDEX>`为页面提供内置搜索功能，`<META>`设置元数据，`<LINK...
- `<MAP>` 和 `<AREA>`：用于定义图像映射。 - `<MAP>` 定义映射名称。 - `<AREA>` 定义图像中的可点击区域。 - 示例： ```html <img src="map.jpg" usemap="#site-map"> <map name="site-map"> <area shape...
<area>标签定义图像映射内部的区域，通常与<map>配合使用，为图片的不同部分指定链接。<audio>用于嵌入音频内容，支持多种音频格式。 <b>、<strong>、<i>和<em>标签用于强调文本。其中<b>和<i>仅用于样式上的加粗和...
7. `<area>`: 在`<map>`元素内使用，定义图像映射中的区域，允许将图像的不同部分链接到不同的URL。 8. `<b>`: 用于设置文本为粗体，HTML5更推荐使用`<strong>`来表示强调。 9. `<base>`: 设置页面中所有链接的...
总结来说，HTML的`<map>`属性和`<area>`元素是创建交互式图像的关键工具，它们可以将静态图像转化为具有多个可点击区域的动态界面，同时考虑到了可访问性。通过灵活地设置形状、坐标和链接，我们可以为用户提供更...
`<map>`定义图像映射的坐标。`<marquee>`创建滚动文本效果，但现在不推荐使用。`<menu>`创建无序列表。`<meta>`提供关于文档的元信息，如字符编码、描述等。`<nobr>`阻止文本换行。`<noframes>`为不支持框架的浏览器...
5. `<area>`：在`<map>`元素中定义图像映射中的一个区域，可以设置链接和形状。 6. `<b>`：使文本呈现为粗体。 7. `<base>`：为页面上的所有相对URL设置基础URL。 8. `<basefont>`：设定页面的默认字体，HTML5中...
`<IMG>`用于插入图像，`<A>`创建链接，`<BASE>`处理链接的相对路径，`<MAP>`和`<AREA>`用于创建图像地图，即在图片上设置可点击的区域。`<IFRAME>`允许在页面中嵌入其他页面或内容。 `<BGSOUND>`和`<EMBED>`处理...
* `<area>`: 定义图像映射内部的区域 链接标签 * `<a>`: 定义链接 * `href`: 规定链接指向的页面的 URL * `target`: 规定在何处打开链接文档 表格标签 * `<table>`: 定义表格 * `<tr>`: 定义表格行 * `<td>`: ...
5. **地图**: `<MAP>`和`<AREA>`标签用于创建图像地图。 - **示例**: ```html <IMG SRC="image.jpg" USEMAP="#map"> <MAP NAME="map"> <AREA SHAPE="rect" COORDS="0,0,82,126" HREF="http://www.example.com">...