HTML 中的区域标记

在这篇文章中，我们将学习 HTML 中的区域标签。区域标签定义图像映射中的热点并与超文本引用相关联或链接以允许用户在网页上可点击。它有助于在单击地图部分时链接不同的页面。当图像上需要多个链接时，标签就变得很有用。

语法

基本语法如下：

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

这里 alt 用于在图像未渲染时替换文本。

• class: 定义元素的类名称。
• 坐标：具有一组形状值。

对于图像映射，语法是：

<img  html name src="path%20loacation" alt="HTML 中的区域标记" >
<map name=" name">
<area shape="shapeName1" coords="x,y coordinates" href="html%20linkPath">
<area shape="shapeName2" coords=" x,y coordinates " href="htmllinkPath">
</map>

说明： 这是一个没有结束标签的空标签，而在 XHTML 中，它被声明为 。并且此区域标签始终嵌入

区域标签在 HTML 中如何工作？

这是完成它的过程；最初是图像图中的图像。

1.要将图像插入页面，我们应该使用下面给出的图像标签：

<img src="edu.jpg" alt="HTML 中的区域标记 logo"> // image from the saved folder. Also, we can get from the web URL directly and map with <map> tag.</map>

它带有 src 属性：描述图像内容的源和替代文本。

2. 其次，打开带有#map属性的地图元素。该图像标签带有一个 use map，后跟“#”符号（use map =“#map”）。地图名称应与使用地图的名称相同。

如何创建图像映射？一起使用地图和名称属性可以将图像和地图放在一起。当鼠标光标在屏幕上变成指针（手形符号）时，浏览器会识别形状的区域。

3.声明要用于映射的区域。

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

属性

一般来说，HTML 标签具有一个或多个属性，有助于向浏览器展示令人愉悦的视觉效果。使用三种属性，即全局属性、事件处理属性和特定于元素的属性。区域标签提供标签特定的属性及其描述，如下所列，并且 HTML 5 有一些新属性。

1.标签特定属性

属性名称	描述	示例
替代	在指定区域定义替代文本，以提高可访问性。
href	定义超级引用意味着指向下一页点/页面 URL 的链接。它将一个区域更改为超链接。
形状	定义要在图像上完成的不同形状。
坐标	给出适合图像中区域的特定值。坐标指定如下： 默认：不需要电线。 矩形：左、上、右、下 圆：x、y、半径 Poly: x1,y1, x2,y2,x3,y3…
target	Specifies where to open the link page, or I can say the end target page.
Nohref	Defines that absence of href. This means the area doesn’t have a link to next page
type	Specifies the content type (MIME)
hreflang	Specifies language-type

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  html src="diary.jpg" alt="HTML 中的区域标记" >
<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 src="edu.jpg" alt="HTML 中的区域标记 logo"    style="max-width:90%"  style="max-width:90%" html class="logo">
<map name="ccmap">
<area shape="rect" coords="89,9,294,50" href="sha.html" alt="HTML 中的区域标记">
<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 中的区域标记; clicking the word BA directs to the page Hello page.

Example #3

Code:

<img src="new.png" alt="HTML 中的区域标记" 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 中的区域标记的详细内容。更多信息请关注PHP中文网其他相关文章！