如何使用 JavaScript 创建客户端图像地图?
在本教程中，我们将了解如何使用 JavaScript 创建客户端图像地图。
我们使用 JavaScript 创建客户端图像地图。客户端图像地图由 <img/> 标签的 usemap 属性启用，并由特殊的 <map> 和 <area> 扩展标签定义。
将要形成地图的图像使用 <img/> 元素正常插入到页面中，但它带有一个名为 usemap 的额外属性。usemap 属性的值是 <map> 上 name 属性的值。元素，您即将遇到，前面有一个井号或散列符号。
在讨论该过程之前，让我们先了解一下什么是图像映射。
图像映射是将图像分解为各个部分的过程，其中每个部分引用不同的文件或指向不同网页的链接。图像中的这些部分是用户可以单击并访问该部分包含的特定文件或网页的区域。我们需要在 HTML 文档中手动实现它，这就是为什么它被称为客户端图像映射。
在创建图像映射时，我们需要使用以下 HTML 标签 -
img 标签 - 图像标签通常用于在文档中嵌入图像。但这次，我们将使用带有特殊属性 usemap 的图像标签，该属性采用赋予 map 标签的 name 属性的值，该属性前面带有井号或散列符号，如以下语法所示 -
<img src="图像地址" alt="备用名称" usemap="#nameAttributeValue">
map 标签 − map 标签用于创建图像地图，它将地图与图像链接起来，其中 name 属性的值作为 img 标签内 usemap 属性的值传递，语法如下所示 −
<map name="value"></map>
area 标签 − area 标签用于定义图像中的不同区域部分。此标签采用 href 属性来指定文件或它所包含页面的地址。我们可以使用shape属性为area标签指定一个特定的形状(矩形、圆形和多边形)，还可以使用coords属性指定其在图像上的位置，如下所示−
<area shape="shape" coords="a, b, a1, b1" href="文件或网页地址" alt="备用名称">
让我们通过代码示例实际实现如何使用 JavaScript 创建客户端图像地图 -
算法
步骤 1 - 在第一步中，我们将使用 usemap 属性定义一个图像标签，如上面的语法所示。
步骤 2 - 在下一步中，我们将定义一个 map 标签，并与其关联 name 属性，并为 map 标签的 name 属性和 img 标签的 usemap 属性赋予相同的值。
步骤 3 - 在第三步中，我们将使用 area 标签在图像上创建不同的热点使用上述语法指定的属性并赋予它们相关值。
步骤 4 - 在最后一步中，我们将添加使用 JavaScript 在用户屏幕上显示输出的功能。
示例 1
在下面的示例中，我们使用 JavaScript 创建客户端图像映射。
<html>
<head>
<title>Using JavaScript Image Map</title>
<script type="text/javascript">
function showTutorial(name) {
document.myform.stage.value = name
}
</script>
</head>
<body>
<form name="myform">
<input type = "text" name = "stage" size = "20" />
</form>
<!-- Create Mappings -->
<img src="https://www.tutorialspoint.com/images/usemap.gif"
alt="HTML Map"
border="0"
usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="https://www.tutorialspoint.com/perl/index.htm"
alt="Perl Tutorial"
target="_self"
onMouseOver="showTutorial('perl')"
onMouseOut="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="https://www.tutorialspoint.com/html/index.htm"
alt="HTML Tutorial"
target="_self"
onMouseOver="showTutorial('html')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="https://www.tutorialspoint.com/php/index.htm"
alt="PHP Tutorial"
target="_self"
onMouseOver="showTutorial('php')"
onMouseOut="showTutorial('')"/>
</map>
</body>
</html>
在上面的例子中，如果你将鼠标光标放在图像的不同位置，你会看到输入栏的文本值会相应变化，如果你点击某个特定位置，你会发现自己位于该位置包含地址的页面或文件中。
让我们看另一个代码示例，以完全理解 JavaScript 创建客户端图像地图的实现 -
示例 2
下面的示例将解释如何使用 JavaScript 创建图像地图 -
<!DOCTYPE html>
<html>
<body>
<p> Hover over the different parts of the image below.</p>
<p id="result"></p>
<img src="https://www.nyongesasande.com/wp-content/uploads/2021/12/tutorials_point.jpeg" alt="HTML Map" border="0"
usemap="#tutorials" />
<map name="tutorials">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="https://www.tutorialspoint.com/perl/index.htm"
alt="Perl Tutorial"
target="_self"
onMouseOver="showTutorial('Perl Tutorials')"
onMouseOut="showTutorial('none')" />
<area shape="circle"
coords="22,83,126,125"
href="https://www.tutorialspoint.com/java/index.htm"
alt="Java Tutorial"
target="_self"
onMouseOver="showTutorial('Java Tutorials')"
onMouseOut="showTutorial('none')" />
<area shape="rect"
coords="373,68,32, 456"
href="https://www.tutorialspoint.com/javascript/index.htm"
alt="JavaScript Tutorial"
target="_self"
onMouseOver="showTutorial('JavaScript Tutorials')"
onMouseOut="showTutorial('none')" />
</map>
<script>
function showTutorial(name) {
var result = document.getElementById("result");
result.innerHTML = "This spot contains the link to the <b>" + name + " </b>page."
}
</script>
</body>
</html>
在此示例中，我们更改了图像上区域标签定义的点的形状，还更改了用户单击这些点时将引用的页面的链接。
在本教程中，我们了解了如何使用 JavaScript 创建客户端图像地图。我们通过两个不同的代码示例了解了该方法的实际实现，以创建图像地图，这样我们就可以更好地理解它，并且不会在头脑中留下困惑。我们可以在图像上创建任意数量的热点，并为它们提供指向不同页面的链接。
