Maqola juda qiziqarli bir tegga bag‘ishlanadi, bu tegning nomi — «area«. Teg orqali istalgan rasmni qismlarga bo‘lib, bu qismlarni alohida ob’yekt sifatida ko‘rishimiz mumkin bo‘ladi. Har bir qismni alohida hisoblab, ular orqali istalgancha havolalar yaratish ko‘pchilikni qiziqtirsa kerak. Misol uchun, bitta terma jamoa futbolchilarini rasmi bor, har bir o‘yinchini rasmini bosganda, shu o‘yinchi haqidagi ma’lumotlar yozilgan veb sahifaga o‘tilsin. Qale, misol juda qiziqarlimi?
Yana bir misol, bitta rasmda butun yer shari tushirilgan, istalgan davlatni bossa, shu davlat to‘g‘risidagi sahifaga o‘tilsin.

YUqoridagi misolni, aynan «area» tegi orqali amalga oshirish mumkin. Quyidagi rasm barcha nazariyani tushuntirib beradi:

beck_html_16_1

Demak, rasm kod orqali ikki qismga bo‘lindi va har biri uchun alohida havola yaratildi. Kodi quyidagicha bo‘ladi.

<html>
<head>
    <meta http-equiv="Content-Type" charset="utf-8">
    <title>AREA</title>
  </head>
  <body>
   <img src="beckham.jpg" width="260" height="180" alt="numbers" usemap="#link">
<map name="link">
  <area shape="rect" coords="50,50,110,110" href="wayne.jpg" alt="Wayne Rooney">
  <area shape="rect" coords="170,50,220,110" href="david.jpg" alt="David Backham">
</map>
      </body>
</html>

Natijani ko‘ramiz, uning uchun quyidagi HAVOLAni bosing

Demak, «beckham» degan rasm ikkiga bo‘lindi, bo‘linish koordinatalar orqali amalga oshirildi. Agar «Rooney«ni ustiga bossangiz, «Wayne«ning rasmi, agar «Beckham» ustiga bossangiz, «David«ning o‘z rasmiga o‘tiladi.

Biz uchun quyidagi teglar notanish:

1. <map>…</map> — ikkita element(teg)ni bog‘lash uchun ishlatiladi. Misolda, «img» tegini «area» tegi bilan bog‘lamoqda. «img» tegining «usemap» attributi orqali «map» e’lon qilindi. Bitta attributi mavjud:

name — bog‘lash uchun qaytarilmas nom berish.

2. <area>…</area> — rasmning aktiv sohalarini aniqlashtirib beradi, qismlarga bo‘lib, ularga havolalar beradi. Bu teg rasm bilan bog‘lanish uchun «map» tegi orasida joylashishi lozim. Rasm necha qismga bo‘linsa, shuncha «area» tegi mavjul bo‘lishi kerak.

Quyidagi attributlari bor:

accesskey — kerakli tugma yoziladi va oldingi maqolalarda yozganimdek, har xil brauzerlarda har xil ishlaydi;

alt — rasmga izzoh berish(yordam uchun yozuv);

href — havola yaratadi, rasmning aktiv sohasi bosilsa, qayerga o‘tish kerakligi ko‘rsatiladi;

nohref — ajratilgan aktiv qism havola emasligini bildiradi;

shape — aktiv sohani shaklini aniqlashtirish. Qanday shaklda rasm qirqib olinsin(kesilsin). Qiymatlari:

*circle — aylana ko‘rinishida kesib olish;

*default — barcha qismlarni aniq(to‘liq) kesib olish;

*poly — ko‘p o‘lchamli shaklda kesib olish;

*rect — to‘rtburchak ko‘rinishida kesib olish.

coords -rasmni kesib  olish uchun koordinatalarni o‘rnatish. «shape» attributi asosida koordinatalar beriladi:

1-hol. shape=rect, coords=x1, y1, x2, y2.

html16_1

2-hol. shape=circle, coords=x, y, R.

html16_2

3-hol. shape=poly, coords= x1, y1, x2, y2,…, xn, yn.

html16_3

tabindex — nechi marotaba «tab» tugmasi bosilsa ob’yekt aktiv bo‘lishini aniqlash(raqam beriladi).

target — havola qay holda ochilishini aniqlashtirish. Quyidagi qiymatlarni qabul qilishi mumkin:

*_blank — brauzerning yangi sahifasida havolani ochish;

*_self — odatdagi oynada ochish(odatiy qiymat);

*_parent — havolani asosiy freymda ochish, freymlar ishlatilmasa, «_self» rejimida ishlaydi.

*_top — barcha freymlarni rad etib, asosiy brauzer oynasida ochadi, freymlar bo‘lmasa «_self» rejimida ishlaydi.

type — havola yo‘naltirayotgan hujjat tipini aniqlashtirish. Mime tiplarni qabul qiladi.