A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/map below:

<map>ï¼šå›¾åƒæ˜ å°„å…ƒç´ - HTMLï¼ˆè¶…æ–‡æœ¬æ ‡è®°è¯è¨€ï¼‰ | MDN

<map>:图像映射元素

Baseline Widely available

HTML <map> 元素与 <area> 元素一起使用来定义一个图像映射(一个可点击的链接区域)。

尝试一下
<map name="infographic">
  <area
    shape="poly"
    coords="130,147,200,107,254,219,130,228"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="130,147,130,228,6,219,59,107"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
  <area
    shape="poly"
    coords="130,147,200,107,130,4,59,107"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/mdn-info2.png"
  alt="MDN infographic" />
img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 232px;
}
属性

这个元素包含全局属性。

name

name 属性给予该映射引用的名称,这个属性必须存在,值不得为空并且不能带空格。name 属性的值不得与同文档中其他 <map> 元素的该属性值相同,如果还指定了 id 属性,则两个属性的值必须相同。

示例 含有两个区域的图像映射

单击左侧的鹦鹉访问 JavaScript 页面,单击右侧的鹦鹉访问 CSS 页面。

HTML
<!-- 图片由 Unsplash 上的 Juliana e Mariana Amorim 创作  -->
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
  <area
    shape="circle"
    coords="275,75,75"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
</map>
<img
  usemap="#primary"
  src="parrots.jpg"
  alt="两只鹦鹉的照片,大小为 350 x 150" />
结果 技术概要 规范 浏览器兼容性 参见

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4