資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 建立客戶端影像地圖？
在本教程中，我們將瞭解如何使用 JavaScript 建立客戶端影像地圖。
我們使用 JavaScript 建立客戶端影像地圖。客戶端影像地圖透過 `` 標籤的 usemap 屬性啟用，並由特殊的 `
要構成地圖的影像使用 `` 元素像往常一樣插入頁面，除了它帶有名為 usemap 的額外屬性。usemap 屬性的值是 `
在討論過程之前，讓我們先了解什麼是影像地圖。
影像地圖是將影像分解成各個部分的過程，每個部分都引用不同的檔案或指向不同網頁的連結。影像中的這些部分是使用者可以點選並訪問該部分包含的特定檔案或網頁的區域。我們需要在我們的 HTML 文件中手動實現它，這就是它被稱為客戶端影像地圖的原因。
在建立影像地圖時，我們需要使用以下 HTML 標籤：
img 標籤 - img 標籤通常用於在文件中嵌入影像。但是這次，我們將使用帶有名為 usemap 的特殊屬性的 img 標籤，該屬性接受傳遞給 img 標籤中 usemap 屬性的 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 屬性的 img 標籤，如上語法所示。
步驟 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.tw/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.tw/perl/index.htm"
alt="Perl Tutorial"
target="_self"
onMouseOver="showTutorial('perl')"
onMouseOut="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="https://tutorialspoint.tw/html/index.htm"
alt="HTML Tutorial"
target="_self"
onMouseOver="showTutorial('html')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="https://tutorialspoint.tw/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.tw/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.tw/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.tw/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+ 次瀏覽
