数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中创建图像地图？
为了在图像中创建可点击区域，我们使用图像地图，它被定义为 <map> 标签，带有开始和结束标签 <map> </map>
该 <area> 标签 定义图像内部的一个区域，并嵌套在 <map> 标签内。以下是属性 -
序号 |
属性 & 描述 |
|---|---|
1 |
alt 区域的替代文本 |
2 |
coords 区域的坐标 |
3 |
download 当点击超链接时，目标将下载 |
4 |
shape 区域的形状 |
5 |
target URL 将在何处打开 |
语法
以下是用于图像可点击区域的语法 -
<map> <area> </map>
示例
以下是在 HTML 中创建图像地图的示例 -
<!DOCTYPE html>
<html>
<head>
<title>HTML map Tag</title>
</head>
<body>
<img src="https://tutorialspoint.com/static/images/logo.png?v2" alt="HTML Map" border="1" usemap="#html" />
<!-- Create Mappings -->
<map name="html">
<area shape="circle" coords="54,50,39" href="https://tutorialspoint.com/biology-tutorials.htm" alt="Team" target="_self" />
</map>
</body>
</html>
在程序的输出中，可点击的部分显示为圆形，坐标范围为 54,50,39，超出范围的可点击部分将不会显示。点击可点击的部分后，将打开另一个页面 logo.html，如下所示
通过使用图像地图，我们可以根据点击图像的位置执行不同的操作。要创建图像地图，我们需要一个图像以及一些描述可点击区域的 HTML 代码。图像可以通过使用 <img> 标签 插入，与其他图像相比，这里的区别在于，我们必须添加 usemap 属性。
语法
<img> 标签内 usemap 属性的使用 -
<img src="pic1.jpg" alt="flower" usemap="#flowermap">
在上述语法中，usamap 值以 # 标签后跟名称开头，用于在图像地图和图像之间创建关系。
在 HTML 中创建图像地图
我们可以通过简单地在 <body> HTML 标签 内添加 <map> 元素来创建图像地图。<map> 标签用于创建图像地图，并通过使用 name 属性将其链接到图像，如下所示 -
<map name="flowermap">
注意 - name 属性必须与 <img> 标签中使用的 usemap 属性值相同。
在 HTML 中添加可点击区域
通过使用 <area> 标签创建可点击区域。对于可点击区域，我们还可以定义形状，我们可以选择以下任何形状 -
rect
rect 形状定义图像上的矩形区域。以下是 rect 属性在 area 标签内的用法 -
<area shape="rect" coords="34,44,270,350" alt="Computer" href="logo.html">
poly
poly 形状定义图像上的多边形区域。以下是 poly 属性在 area 标签内的用法 -
<area shape="poly" coords="140,121,181,116,204,160,204,222,191, 270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
circle
circle 形状定义图像上的圆形区域。以下是 circle 属性在 area 标签内的用法 -
<area shape="circle" coords="256, 300, 38" href="cup.htm">
default
default 用于定义图像上的整个区域。
我们还可以向形状添加坐标，这将把可点击区域放置到图像上。
示例
如果我们想创建一个可点击的矩形区域，则必须执行以下代码。
<!DOCTYPE html>
<html>
<body>
<h2>Using Image Maps in HTML</h2>
<p>Click on the logo to go to a new page and read more about the topic:</p>
<img src="https://tutorialspoint.com/images/logo.png?v2" alt="Workplace" usemap="#workmap" width="400" height="150">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://tutorialspoint.com/index.htm">
</map>
</body>
</html>
2K+ 浏览量
