資料結構
網路
關係型資料庫管理系統
作業系統
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.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+ 瀏覽量
