資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中建立影像地圖？
為了在影像中建立可點選區域，我們使用影像地圖，它被定義為 <map> 標籤，帶有開始和結束標籤 <map> </map>
該 <area> 標籤 定義影像內部的一個區域，並巢狀在 <map> 標籤內。以下是屬性 -
序號 |
屬性 & 描述 |
|---|---|
1 |
alt 區域的替代文字 |
2 |
coords 區域的座標 |
3 |
download 當點選超連結時，目標將下載 |
4 |
shape 區域的形狀 |
5 |
target URL 將在何處開啟 |
語法
以下是用於影像可點選區域的語法 -
<map> <area> </map>
示例
以下是在 HTML 中建立影像地圖的示例 -
<!DOCTYPE html>
<html>
<head>
<title>HTML map Tag</title>
</head>
<body>
<img src="https://tutorialspoint.tw/static/images/logo.png?v2" alt="HTML Map" border="1" usemap="#html" />
<!-- Create Mappings -->
<map name="html">
<area shape="circle" coords="54,50,39" href="https://tutorialspoint.tw/biology-tutorials.htm" alt="Team" target="_self" />
</map>
</body>
</html>
在程式的輸出中，可點選的部分顯示為圓形，座標範圍為 54,50,39，超出範圍的可點選部分將不會顯示。點選可點選的部分後，將開啟另一個頁面 logo.html，如下所示
透過使用影像地圖，我們可以根據點選影像的位置執行不同的操作。要建立影像地圖，我們需要一個影像以及一些描述可點選區域的 HTML 程式碼。影像可以透過使用 <img> 標籤 插入，與其他影像相比，這裡的區別在於，我們必須新增 usemap 屬性。
語法
<img> 標籤內 usemap 屬性的使用 -
<img src="pic1.jpg" alt="flower" usemap="#flowermap">
在上述語法中，usamap 值以 # 標籤後跟名稱開頭，用於在影像地圖和影像之間建立關係。
在 HTML 中建立影像地圖
我們可以透過簡單地在 <body> HTML 標籤 內新增 <map> 元素來建立影像地圖。<map> 標籤用於建立影像地圖，並透過使用 name 屬性將其連結到影像，如下所示 -
<map name="flowermap">
注意 - name 屬性必須與 <img> 標籤中使用的 usemap 屬性值相同。
在 HTML 中新增可點選區域
透過使用 <area> 標籤建立可點選區域。對於可點選區域，我們還可以定義形狀，我們可以選擇以下任何形狀 -
rect
rect 形狀定義影像上的矩形區域。以下是 rect 屬性在 area 標籤內的用法 -
<area shape="rect" coords="34,44,270,350" alt="Computer" href="logo.html">
poly
poly 形狀定義影像上的多邊形區域。以下是 poly 屬性在 area 標籤內的用法 -
<area shape="poly" coords="140,121,181,116,204,160,204,222,191, 270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
circle
circle 形狀定義影像上的圓形區域。以下是 circle 屬性在 area 標籤內的用法 -
<area shape="circle" coords="256, 300, 38" href="cup.htm">
default
default 用於定義影像上的整個區域。
我們還可以向形狀新增座標，這將把可點選區域放置到影像上。
示例
如果我們想建立一個可點選的矩形區域，則必須執行以下程式碼。
<!DOCTYPE html>
<html>
<body>
<h2>Using Image Maps in HTML</h2>
<p>Click on the logo to go to a new page and read more about the topic:</p>
<img src="https://tutorialspoint.tw/images/logo.png?v2" alt="Workplace" usemap="#workmap" width="400" height="150">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://tutorialspoint.tw/index.htm">
</map>
</body>
</html>
2K+ 瀏覽量
