HTML 為使網(wǎng)站更具互動(dòng)性提供了強(qiáng)大的支援。 HTML 允許以最少的編碼進(jìn)行直覺的設(shè)計(jì)。當(dāng)我們想要讓圖像更具互動(dòng)性時(shí),HTML提供了圖像映射的功能。使用圖像映射,我們可以與圖像進(jìn)行交互,並在同一幀中從一張圖像跳到另一張圖像。當(dāng)我們想要實(shí)現(xiàn)網(wǎng)站上的圖片放大之類的功能時(shí),這個(gè)功能就很有用了。圖片上會(huì)有一個(gè)可點(diǎn)擊的區(qū)域;我們可以設(shè)定當(dāng)使用者點(diǎn)擊該區(qū)域時(shí)要重定向的 URL 或其他圖像。
文法
<img src = " " usemap = "new-map" >
<map name = "new-map" >
. . . .
. . . .
</map>
地圖標(biāo)籤的語(yǔ)法如上例所示。我們有兩個(gè)標(biāo)籤,img 和 map。在地圖標(biāo)籤中,我們將其命名為“new-map”。 img 標(biāo)籤將有 src,它將顯示圖像並注意它有一個(gè)名為 usemap 的屬性。我們已使用 usemap 屬性將地圖名稱傳遞給此 img 標(biāo)籤。在地圖標(biāo)籤之間的空白區(qū)域中,我們將定義該區(qū)域的配置及其在圖像上的連結(jié)。
HTML提供了「map」標(biāo)籤來實(shí)現(xiàn)影像映射的功能。這是一個(gè)非常簡(jiǎn)單的標(biāo)籤,通常與“img”標(biāo)籤一起使用。 img 標(biāo)籤將用於定義要顯示的主圖像或第一個(gè)圖像。然後地圖標(biāo)籤將用於定義區(qū)域和連結(jié)。 img 和 map 這兩個(gè)標(biāo)籤將透過 name 參數(shù)連結(jié)在一起。
HTML 中地圖標(biāo)籤的屬性
以下是 HTML 中地圖標(biāo)籤的前 5 個(gè)屬性:
1.姓名
地圖標(biāo)籤主要與「name」屬性相關(guān)。 name 屬性用於為該特定定義的對(duì)應(yīng)提供名稱。然後在 img 元素中使用該名稱,以便它們可以連結(jié)在一起。使用此名稱屬性映射,標(biāo)籤將包含另一個(gè)元素 。之間。程式碼如下所示。
代碼:
<map name = "new-map" >
. . . .
<area shape = " " coords = " " href = " " alt = " " >
. . . .
</map>
area 元素定義影像中的可點(diǎn)擊區(qū)域。一般來說,一個(gè)地圖標(biāo)籤將包含多個(gè)區(qū)域。元素。然後,區(qū)域元素將具有形狀、繩索、href 等屬性,這些屬性在定義影像映射時(shí)非常有用。我們可以使用這些屬性來定義區(qū)域和相關(guān)影像。區(qū)域元素通常與地圖標(biāo)籤一起使用,並且始終嵌套在地圖標(biāo)籤內(nèi)。 area 元素具有以下屬性,這些屬性在定義圖像映射時(shí)非常重要且有用。
2.形狀
此屬性用於指定影像上可點(diǎn)選區(qū)域的形狀。我們總共有四個(gè)與可用形狀相關(guān)的值。
-
預(yù)設(shè)值: 將定義整個(gè)區(qū)域
-
circle:指定圓形
-
rect:指定長(zhǎng)方形形狀
-
poly: 指定多邊形形狀
3.座標(biāo)
此屬性與 shape 屬性一起使用來指定該區(qū)域在影像上的位置。該屬性的值將根據(jù)指定的形狀而變化。
4.連結(jié)
此屬性用作 URL 將重定向到的 URL。當(dāng)僅按一下由座標(biāo)定義的特定區(qū)域時(shí),URL 將會(huì)被重新導(dǎo)向。
5.替代
此屬性用於指定在圖像不可用時(shí)要顯示的替代文字。還有更多與區(qū)域標(biāo)籤相關(guān)的屬性,但這些是理解使用地圖標(biāo)籤所需的基本屬性。
在 HTML 中實(shí)作地圖標(biāo)籤的範(fàn)例
這裡是 HTML 中地圖標(biāo)籤的範(fàn)例,詳細(xì)解釋。
範(fàn)例#1
讓我們看看使用影像映射的矩形的簡(jiǎn)單範(fàn)例。
代碼:
<!DOCTYPE html>
<html>
<head>
<title> Image map Example </title>
</head>
<body>
<p> Click on the image to see the clickable area on it </p>
<img src = "rectangle.png" alt = "Rectangle Shape" usemap = "#new-map" >
<map name = "new-map" >
<area shape = "rect" coords = "91,70,290,160" alt = "Rectangle" href = "#" >
</map>
</body>
</html>
輸出:

如果我們點(diǎn)擊矩形區(qū)域,它會(huì)顯示可點(diǎn)擊區(qū)域的邊框,如下所示,

請(qǐng)注意,由於我們尚未在 href 屬性中提供有效的 URL,因此目前該 URL 不會(huì)被重定向。
範(fàn)例#2
讓我們用 Circle 嘗試相同的範(fàn)例。
代碼:
<!DOCTYPE html>
<html>
<head>
<title> Image map Example </title>
</head>
<body>
<p> Click on the image to see the clickable area on it </p>
<img src = "circle.png" alt = "Circle Shape" usemap = "#new-map" >
<map name = "new-map" >
<area shape = "circle" coords = "111,87,62" alt = "Circle" href = "#" >
</map>
</body>
</html>
輸出:

點(diǎn)擊圖片時(shí):

請(qǐng)注意,形狀類型已變更為圓形,並相應(yīng)提供了座標(biāo)值。
範(fàn)例 #3
讓我們用多邊形作為另一個(gè)影像的子部分來設(shè)計(jì)範(fàn)例。
代碼:
<!DOCTYPE html>
<html>
<head>
<title> Image map Example </title>
</head>
<body>
<p> Click on the image to see the clickable area on it </p>
<img src = "polygon.png" alt = "Polygon Shape" usemap = "#new-map" >
<map name = "new-map" >
<area shape = "poly" coords = "166,45,217,80,197,134,139,134,119,79" alt = "Polygon" href = "#" >
</map>
</body>
</html>
輸出:

因此,我們?cè)谠加跋竦木匦紊嫌形暹呅蔚淖硬糠帧U?qǐng)注意,我們可以透過調(diào)整座標(biāo)值來實(shí)現(xiàn)任何類型的可點(diǎn)擊區(qū)域。
可點(diǎn)選區(qū)域:

結(jié)論
所以,我們已經(jīng)了解了什麼是地圖標(biāo)籤以及它是如何使用的。 map 標(biāo)籤用於客戶端影像映射。我們可以使用地圖標(biāo)籤將圖像的特定區(qū)域定義為可點(diǎn)擊。我們可以透過根據(jù)需要提供有效座標(biāo)來實(shí)現(xiàn)任何形狀。
以上是HTML 中的地圖標(biāo)籤的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!