<map>：图像映射元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
尝试一下
<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; } 属性
这个元素包含全局属性。
示例
含有两个区域的图像映射
单击左侧的鹦鹉访问 JavaScript 页面，单击右侧的鹦鹉访问 CSS 页面。
HTML
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" /> 结果
技术概要
规范
| Specification |
|---|
| HTML # the-map-element |
浏览器兼容性
Loading…