HTML5：＜area＞元素和＜map＞元素

勤奋的程哥

已于 2022-03-03 01:03:14 修改

阅读量322

点赞数 2

文章标签： html5 elementui html

于 2022-03-02 23:57:41 首次发布

本文链接：https://blog.youkuaiyun.com/hsjajwbsbsjs/article/details/123241742

版权

本文详细介绍了HTML中的map和area元素，用于创建交互式图像地图。map元素与img元素配合，定义可点击的区域，area元素则定义了各个区域的形状、坐标及链接。代码示例展示了如何使用rect、circle和poly形状来创建不同形状的可点击区域。了解这些元素有助于提升网页的交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

哈喽，大家好，我是阿闽。今天是2022年3月2日，日常更HTML元素学习模块。
本文代码不具有可移植性。读者可以通过文末链接访问文档。

map元素

简介

map元素可以用来链接img元素，创建分区相应图，通过点击img元素上不同的区域让浏览器导向不同的URL上。其分区由子元素area创建。

元素类型

父元素是短语元素就是短语元素，父元素是流元素就是流元素

局部属性

name属性。用法之后在代码用例中给出。

子元素

一个或多个area元素

默认CSS样式

无。

area元素

简介

area元素在map元素中划分出一些区域，使之导向某个URL。可以编码区域的形状和位置。

元素类型

短语元素

局部属性

alt

在未显示图像的浏览器上显示代替的文本字符串。在HTML5中，当href属性存在时应有此属性。

href

区域所导向的超链接

target、hreflang、download

参考a元素相关属性: <a>元素复习博客

type

指定目标URL的媒体类型，允许的所有值参看：w3g

media

指定链接资源所用的媒体类型

shape

此属性指定area元素形状，配合coords属性划定范围
允许的值

rect
表示area形状为矩形（rectangle）

circle
表示area形状为圆

poly
表示area形状为多边形

default
表示map中其余（没有area）的部分

coords

此属性为一系列以像素为单位的数值，可以为整数和小数，数值之间用comma分隔。其解析由shape属性确定。

当shape属性的值分别为：

rect

四个像素距离值

img左边缘与矩形的左侧
img上边缘与矩形的上侧
img左边缘与矩形的右侧
img上边缘与矩形的下侧

circle

三个像素距离值

img左边缘与圆心距离
img上边缘与圆心距离
圆半径

poly

三对及以上对像素距离值

表示多边形各顶点到img左边缘距离和上边缘距离的数对

default

无值

代码示例：

<!DOCTYPE HTML>
<html lang="ch">
    <head>
        <meta charset="UTF-8"/>
        <base href="http://cmtheit.com/"/>
        <title>area元素和map元素</title>
    </head>
    <body>
    	<!-- 通过img的usemap属性和相应name属性值的map链接-->
        <img usemap="#shapes" src="/image/0.jpg"/>
        <map name="shapes">
        <!--area元素作为map元素的子元素-->
            <area shape="rect"
                  coords="0,100,100,200"
                  href="https://www.python.org"
                  target=""
                  alt="rect"/>
            <area shape="circle"
                  coords="50, 50, 50"
                  href="https://leetcode-cn.com"
                  target="_blank"
                  alt="circle"/>
            <area shape="poly"
                  coords="100,100, 157.73,0, 273.2,0, 330.94,100, 273.2,200, 157.73,200"
                  href="https://www.douyin.com"
                  target="_blank"
                  alt="poly"/>
            <area shape="default"
                  href="http://cmtheit.com"
                  target="_blank"
                  alt="default"/>
        </map>
    </body>
</html>

文档链接地址：http://cmtheit.com/temp/blogs/area/1.html
注意：若area区域超出img元素区域，则只有在img元素区域有效。
更多元素博客，请参看：HTML元素复习博客集
今天的分享就到这里，觉得有用就点个免费的赞吧！谢谢！