Tag Kawasan dalam HTML

Dalam artikel ini, kita akan mempelajari tentang Teg Kawasan dalam HTML. Teg Kawasan mentakrifkan tempat liputan dalam peta imej dan mengaitkan atau memaut dengan rujukan hiperteks untuk membolehkan pengguna boleh diklik pada halaman web. Ia membantu memautkan halaman yang berbeza semasa bahagian peta diklik. Dan teg menjadi berguna apabila terdapat keperluan untuk berbilang pautan pada imej.

Sintaks

Sintaks asas diberikan di bawah:

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

Di sini alt digunakan untuk teks ganti jika imej tidak dipaparkan.

• kelas: Mentakrifkan nama kelas untuk elemen.
• kod: Mempunyai set nilai untuk bentuk.

Dengan peta imej, sintaksnya ialah:

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

Penjelasan: Ini ialah teg kosong tanpa teg penutup, manakala, dalam kes XHTML, ia diisytiharkan sebagai . Dan teg kawasan ini sentiasa dibenamkan dengan tag (disertakan dalam bekas peta), yang memberikan nilai koordinat imej tertentu. Dan juga, kawasan yang tidak aktif berlaku pertindihan; ia diselesaikan dengan memberi keutamaan kepada kawasan yang lebih tinggi diaktifkan. Bahagian berikut merangkumi cara menggunakan teg kawasan dengan contoh dan keserasian Penyemak imbas serta atribut yang disokong oleh mereka.

Bagaimanakah Teg kawasan berfungsi dalam HTML?

Berikut adalah proses untuk membuatnya melalui; pada mulanya, imej dalam peta imej.

1. Untuk memasukkan imej ke halaman, kita sepatutnya menggunakan tag imej yang diberikan di bawah:

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

Ia disertakan dengan atribut src: Sumber dan teks alt yang menerangkan kandungan imej.

2. Kedua, buka elemen peta dengan atribut #map. Teg imej ini disertakan dengan peta penggunaan diikuti dengan simbol ‘#’ (guna peta =” #peta”). Nama peta hendaklah nama yang sama dengan peta guna.

Bagaimana untuk mencipta peta imej? Menggunakan atribut peta dan nama bersama-sama untuk mempunyai imej dan peta bersama-sama. Penyemak imbas mengenali kawasan bentuk apabila kursor tetikus di atas skrin menjadi penunjuk(simbol tangan).

3. Untuk mengisytiharkan kawasan yang akan digunakan untuk memetakan.

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

Atribut

Secara umum, teg HTML mempunyai satu atau lebih atribut yang membantu menunjukkan penyemak imbas secara visual menyenangkan. Terdapat tiga jenis atribut yang digunakan, iaitu global, pengendalian peristiwa dan atribut khusus elemen. Teg kawasan menyumbangkan atribut khusus teg dan penerangan mengenainya, yang disenaraikan di bawah dan HTML 5 mempunyai beberapa atribut baharu.

1. Atribut Khusus Tag

Nama Atribut	Penerangan	Contoh
alt	Mentakrifkan teks ganti dalam kawasan yang ditentukan yang meningkatkan kebolehcapaian.
href	Mentakrifkan rujukan hiper bermaksud pautan ke titik halaman seterusnya/ URL Halaman. Ia menukar kawasan kepada hiperpautan.
bentuk	Mentakrifkan bentuk berbeza yang perlu dilakukan pada imej.
kod	Memberi nilai khusus yang sesuai dengan rantau dalam imej. Koord dinyatakan seperti berikut : Lalai: tiada kord diperlukan. Belok: kiri, atas, kanan, bawah Bulatan : x , y ,jejari 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/imghwm/default1.png" data-src="diary.jpg" class="lazy" tag kawasan dalam html="#Diary" alt="Tag Kawasan dalam 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/imghwm/default1.png" data-src="edu.jpg" alt="Tag Kawasan dalam HTML logo"    style="max-width:90%"  style="max-width:90%" tag kawasan dalam html="#ccmap">
<map name="ccmap">
<area shape="rect" coords="89,9,294,50" href="sha.html" alt="Tag Kawasan dalam 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 Tag Kawasan dalam HTML; clicking the word BA directs to the page Hello page.

Example #3

Code:

<img src="/static/imghwm/default1.png" data-src="new.png" class="lazy" alt="Tag Kawasan dalam HTML" border="0" tag kawasan dalam 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.

Atas ialah kandungan terperinci Tag Kawasan dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!