Bereichs-Tag in HTML

In diesem Artikel erfahren wir mehr über Area-Tags in HTML. Area Tag definiert einen Hotspot in einer Imagemap und verknüpft oder verlinkt mit einer Hypertext-Referenz, damit ein Benutzer auf der Webseite anklickbar ist. Es hilft dabei, die verschiedenen Seiten zu verknüpfen, während auf einen Kartenabschnitt geklickt wird. Und ein Tag wird nützlich, wenn mehrere Links auf dem Bild benötigt werden.

Syntax

Die grundlegende Syntax ist unten angegeben:

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

Hier wird Alt für alternativen Text verwendet, wenn ein Bild nicht gerendert wird.

• class: Definiert einen Klassennamen für ein Element.
• Koordinaten: Verfügt über eine Reihe von Werten für die Formen.

Bei einer Imagemap lautet die Syntax:

<img  src="/static/imghw/default1.png" data-src="edu.jpg" class="lazy" bereichs-tag in html="# name" alt="Bereichs-Tag in HTML" >
<map name=" name">
<area shape="shapeName1" coords="x,y coordinates" href="html%20linkPath">
<area shape="shapeName2" coords=" x,y coordinates " href="htmllinkPath">
</map>

Erklärung: Dies ist ein leeres Tag ohne schließende Tags, während es im Fall von XHTML als deklariert ist. Und dieses Bereichs-Tag ist immer mit

Wie funktioniert das Bereichs-Tag in HTML?

Hier ist der Prozess, um es zu schaffen; zunächst das Bild in der Imagemap.

1. Um ein Bild in die Seite einzufügen, müssen wir ein Bild-Tag verwenden, das unten angegeben ist:

<img src="/static/imghw/default1.png" data-src="edu.jpg" class="lazy" alt="Bereichs-Tag in HTML logo"> // image from the saved folder. Also, we can get from the web URL directly and map with <map> tag.</map>

Es enthält src-Attribute: Quelle und Alternativtext, der den Bildinhalt beschreibt.

2. Zweitens öffnen Sie das Kartenelement mit dem Attribut #map. Dieses Bild-Tag enthält eine Use-Map, gefolgt vom Symbol „#“ (use-Map = „#map“). Mapname sollte mit dem Namen der Usemap identisch sein.

Wie erstelle ich eine Imagemap? Durch gemeinsame Verwendung von Karten- und Namensattributen können Bilder und Karten zusammengefügt werden. Der Browser erkennt den Bereich der Form, wenn der Mauszeiger über dem Bildschirm zu einem Zeiger (Handsymbol) wird.

3. Um die Gebiete zu deklarieren, die für die Kartierung verwendet werden sollen.

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

Attribute

Im Allgemeinen verfügen HTML-Tags über ein oder mehrere Attribute, die dazu beitragen, den Browser optisch ansprechend darzustellen. Es werden drei Arten von Attributen verwendet: globale, ereignisverarbeitende und elementspezifische Attribute. Das Area-Tag trägt tagspezifische Attribute und eine Beschreibung davon bei, die unten aufgeführt sind, und HTML 5 verfügt über einige neue Attribute.

1. Tagspezifische Attribute

Name der Attribute	Beschreibung	Beispiel
alt	Definiert einen alternativen Text im angegebenen Bereich, der die Barrierefreiheit verbessert.
href	Definiert die Hyperreferenz, also einen Link zu den nächsten Seitenpunkten/URL einer Seite. Es verwandelt einen Bereich in einen Hyperlink.
Form	Definiert die verschiedenen Formen, die auf dem Bild ausgeführt werden sollen.
Koordinaten	Gibt die spezifischen Werte an, die für die Region im Bild geeignet sind. Die Koordinaten werden wie folgt angegeben: Standard: keine Kabel erforderlich. Rechts: links, oben, rechts, unten Kreis: x, y, Radius 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  src="/static/imghw/default1.png" data-src="diary.jpg" class="lazy" bereichs-tag in html="#Diary" alt="Bereichs-Tag in 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 class="logo lazy" src="/static/imghw/default1.png" data-src="edu.jpg" alt="Bereichs-Tag in HTML logo"    style="max-width:90%"  style="max-width:90%" bereichs-tag in html="#ccmap">
<map name="ccmap">
<area shape="rect" coords="89,9,294,50" href="sha.html" alt="Bereichs-Tag in 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 Bereichs-Tag in HTML; 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="Bereichs-Tag in HTML" border="0" bereichs-tag in html="#Protocols">
<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.

Das obige ist der detaillierte Inhalt vonBereichs-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!