在這篇文章中，我們將學(xué)習(xí) HTML 中的區(qū)域標(biāo)籤。區(qū)域標(biāo)籤定義圖像映射中的熱點(diǎn)並與超文本引用相關(guān)聯(lián)或連結(jié)以允許使用者在網(wǎng)頁上可點(diǎn)擊。它有助於在單擊地圖部分時(shí)連結(jié)不同的頁面。當(dāng)圖像上需要多個(gè)連結(jié)時(shí)，標(biāo)籤就變得很有用。

文法

基本文法如下：

<area alt="text" class=" " coords=" " shape> ;

這裡 alt 用於在圖像未渲染時(shí)替換文字。

• class:?定義元素的類別名稱。
• 座標(biāo)：具有一組形狀值。

對於圖像映射，語法是：

<img  src="/static/imghw/default1.png" data-src="edu.jpg" class="lazy" html name alt="HTML 中的區(qū)域標(biāo)記" >
<map name=" name">
<area shape="shapeName1" coords="x,y coordinates" href="html%20linkPath">
<area shape="shapeName2" coords=" x,y coordinates " href="htmllinkPath">
</map>

說明： 這是一個(gè)沒有結(jié)束標(biāo)籤的空標(biāo)籤，而在 XHTML 中，它被宣告為 。並且此區(qū)域標(biāo)籤始終嵌入

區(qū)域標(biāo)籤在 HTML 中如何運(yùn)作？

這是完成它的過程；最初是影像圖中的影像。

1.要將圖像插入頁面，我們應(yīng)該使用下面給出的圖像標(biāo)籤：

<img src="/static/imghw/default1.png" data-src="edu.jpg" class="lazy" alt="HTML 中的區(qū)域標(biāo)記 logo"> // image from the saved folder. Also, we can get from the web URL directly and map with <map> tag.</map>

它帶有 src 屬性：描述圖像內(nèi)容的來源和替代文字。

2. 其次，開啟有#map屬性的地圖元素。該圖像標(biāo)籤帶有一個(gè) use map，後面跟著“#”符號(hào)（use map =“#map”）。地圖名稱應(yīng)與使用地圖的名稱相同。

如何建立影像映射？一起使用地圖和名稱屬性可以將圖像和地圖放在一起。當(dāng)滑鼠遊標(biāo)在螢?zāi)簧献兂芍笜?biāo)（手形符號(hào)）時(shí)，瀏覽器會(huì)辨識(shí)形狀的區(qū)域。

3.聲明要用於映射的區(qū)域。

<area shape="rect" cords='…….href=""?' alt="">
href comes with alt attribute by default.

屬性

一般來說，HTML 標(biāo)籤具有一個(gè)或多個(gè)屬性，有助於向?yàn)g覽器展示令人愉悅的視覺效果。使用三種屬性，即全域?qū)傩?、事件處理屬性和特定於元素的屬性。區(qū)域標(biāo)籤提供標(biāo)籤特定的屬性及其描述，如下所列，且 HTML 5 有一些新屬性。

1.標(biāo)籤特定屬性

2. Standard Attributes

The description of these attributes has already been discussed in the previous article.

• Access key
• class
• dir
• id
• Style
• lang
• id
• tab index
• title.

3. Global Attributes

• onmouse down
• onmouse up
• onmouse over
• onmouse move
• onmouse out
• on focus
• on blur
• onkey press
• onkey down
• onkey up.

Examples to Implement Area Tags in HTML

Below are examples of implementing area tags in HTML:

Example #1

In the below example, I have created a jpg image diary.jpg. When u execute the code, the hand tool moves over the image at the specified cords; when you click on it, it directs you to the page rr.html.

Code:

<img  src="/static/imghw/default1.png" data-src="diary.jpg" class="lazy" html alt="HTML 中的區(qū)域標(biāo)記" >
<map name="Diary">
<area shape="rect" coords="94,91,189,193" href="rr.html">
</map>

Code: rr.html

hello

 Online tutorial Class

Output:

Example #2

Code:

<img class="logo lazy" src="/static/imghw/default1.png" data-src="edu.jpg" alt="HTML 中的區(qū)域標(biāo)記 logo"    style="max-width:90%"  style="max-width:90%" html>
<map name="ccmap">
<area shape="rect" coords="89,9,294,50" href="sha.html" alt="HTML 中的區(qū)域標(biāo)記">
<area shape="rect" coords="297,7,407,54" href="rr.html" alt="Welcome">
</map>

Code: rr.html

hello

 Online tutorial Class

Code: sha.html

hello

 Welcome to the Page

Output:

The Output below shows the logo of HTML 中的區(qū)域標(biāo)記; clicking the word BA directs to the page Hello page.

Example #3

Code:

<img src="/static/imghw/default1.png" data-src="new.png" class="lazy" alt="HTML 中的區(qū)域標(biāo)記" border="0" html>
<map name="Protocols">
<area shape="Poly" coords="74,0,113,29,98,72,52,72,38,27" href="https://www.manageengine.com/network-monitoring/what-is-snmp.html%22" alt="SNMP Tutorial" target="_blank">
<area shape="rect" coords="22,83,126,125" alt="FTP Tutorial" href="https://www.techtarget.com/searchnetworking/definition/File-Transfer-Protocol-FTP" target="_blank">
<area shape="circle" coords="73,168,32" alt="http Tutorial" href="https://www.webopedia.com/TERM/H/HTTP.html" target="_blank">
</map>

Explanation of the above program: In this example, we have created an image map using the image file called new.png, which has three clickable areas declared within it using the tag. The first clickable area is a polygonal shape that links to the SNMP page called www.managengine.com. The second clickable area is a rectangular shape that links to the FTP page called www.searchnetworking.com, and finally, the last clickable area is a circle that links to an HTTP page called www.webopedia.com.

Output:

Output:

Conclusion

Therefore, we have seen how the area tag is used in active areas in switching to the pages with brief information explaining how to use the tag in clickable areas with syntax and demo examples.

以上是HTML 中的區(qū)域標(biāo)記的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！