数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 创建客户端图像地图？
在本教程中，我们将了解如何使用 JavaScript 创建客户端图像地图。
我们使用 JavaScript 创建客户端图像地图。客户端图像地图通过 `` 标签的 `usemap` 属性启用，并通过特殊的 `
将形成地图的图像以通常的方式使用 `` 元素插入页面，但它带有一个名为 `usemap` 的额外属性。`usemap` 属性的值是您即将遇到的 `
在讨论该过程之前，让我们先了解什么是图像地图。
图像地图是将图像分成各个部分的过程，其中每个部分都引用不同的文件或指向不同网页的链接。图像中的这些部分是用户可以点击并访问该部分包含的特定文件或网页的区域。我们需要在我们的 HTML 文档中手动实现它，这就是它被称为客户端图像地图的原因。
创建图像地图时，我们需要使用以下 HTML 标签：
img 标签 - 图像标签像往常一样用于在文档中嵌入图像。但是这次，我们将使用带有名为 usemap 的特殊属性的图像标签，该属性的值是在 img 标签内部传递给 map 标签的 name 属性的值，前面加上井号或哈希符号，如下面的语法所示：
<img src="image address" alt="alternate name" 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="file or web page address" alt="alternate name">
让我们了解一下，如何通过使用代码示例实际实现来使用 JavaScript 创建客户端图像地图：
算法
步骤 1 - 在第一步中，我们将定义一个带有 usemap 属性的图像标签，如上语法所示。
步骤 2 - 在下一步中，我们将定义一个带有 name 属性的 map 标签，并为 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://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://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://tutorialspoint.com/html/index.htm"
alt="HTML Tutorial"
target="_self"
onMouseOver="showTutorial('html')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="https://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://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://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://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>
在此示例中，我们更改了图像上由 area 标签定义的热点形状，还更改了这些热点在用户单击后将引用的页面的链接。
在本教程中，我们了解了如何使用 JavaScript 创建客户端图像地图。我们已经看到了该方法的实际实现，并使用两个不同的代码示例创建了图像地图，以便我们能够更好地理解它，并且在脑海中不会有任何混淆。我们可以在图像上创建任意数量的热点，并为其提供指向不同页面的链接。
1K+ 浏览量
