JavaScript 如何创建图像映射

JavaScript可以用于创建客户端图像映射。图像映射是网页上具有多个链接指向其他页面的图像。这些链接被称为热点。图像映射用于导航到其他页面或同一网页上的不同链接。

在图像映射中，图像可以被划分为不同的部分。我们可以为每个部分包含链接，点击一个部分后，它将打开相应的链接。部分可以被划分为不同的形状，比如 圆形、矩形 或 多边形 。要创建一个矩形图像映射，我们需要两个不同的坐标，即 右上角 和 左下角 。类似地，要创建一个五边形图像映射，我们需要五个坐标。

图像映射提供了一种在不需要创建图像文件的情况下链接图像各个部分的方法。在 < img>标签中使用 usemap 属性来定义该图像的映射描述。该属性调用应用于特定图像的映射描述。每个图像映射都有一个唯一的map，因此我们必须在MAP元素中使用name属性。

还有另一个标签叫做 < area>标签，它定义了每个区域的坐标和形状。我们可以在 < area>标签中使用onclick、ondblclick、onmouseover、onmouseout、onblur等事件。

定义图像映射的代码片段如下。

语法

<img src = "jtp.png" usemap = "#jtp">
<map name = "jtp">
    <area shape = "rect" coords="x, y" />
    <area shape = "circle" coords = "x, y, r" />
</map>

现在，让我们看一些使用图片映射的示例，以更清晰地理解它。

示例1

在这个示例中，我们使用一张图片创建了一个图片映射。我们将图片分为两个部分，分别是矩形和圆形形状。

第一个部分是图片的顶部区域，第二个部分是图片的中间区域。

<html>
<head>
<title> JavaScript Image Map </title>
<script>
function show(name) {
document.my.res.value = name;
}
</script>
</head>

<body style = "text-align: center;">
<h2> It is an example of JavaScript's Image map </h2>
<form name = "my">
<input type = "text" name = "res" size = "25px" style = "font-size: 25px; text-align: center; border: 2px solid blue; background-color: pink;"/>
</form>
<br>
<img src = "jtp.png" border = "5" usemap = "#names" height = "300px"/>

<map name = "names">
<area shape = "rect" coords = "0, 0, 325, 90" href = "#" onclick = "show('Rectangular Shape')" />

<area shape = "circle" coords = "150, 140, 60" href = "#" onclick = "show('Circular Shape')" />
</map>
</body>
</html>

输出

在执行上述代码后，输出结果将为-

JavaScript 如何创建图像映射

点击顶部区域时，输出将是 –

JavaScript 如何创建图像映射

示例2

这里，我们将图片传递到

标签的 href 属性中。这意味着当我们点击各个部分时，相应的图片将被显示出来。

该图片被分为两个部分。第一部分是图片的顶部区域，第二部分是图片的中间区域。点击相应的部分后，首先在给定的文本框中显示链接图片的名称，然后图片将显示出来。

<html>
<head>
<title> JavaScript Image Map </title>
<script>
function show(name) {
document.my.res.value = name;
}
</script>
</head>

<body style = "text-align: center;">
<h2> It is an example of JavaScript's Image map </h2>
<form name = "my">
<input type = "text" name = "res" size = "25px" style = "font-size: 25px;text-align: center;border: 2px solid blue; background-color: pink;"/>
</form>
<br>
<img src = "jtp.png" border = "5" usemap = "#names" height = "300px"/>

<map name = "names">
<area shape = "rect" coords = "0, 0, 325, 90" href = "forest.jpg" onclick = "show('Forest.jpg')" />

<area shape = "circle" coords = "150, 140, 60" href = "tiger.png" onclick = "show('Tiger.png')" />
</map>
</body>
</html>

输出

执行上述代码后，输出将为-

JavaScript 如何创建图像映射