<area>¶

ტეგი <area> (ინგ. area - არე) განსაზღვრავს გამოსახულების აქტიურ არეებს, რომლებიც ბმულები არიან.

სურათი, რომელსაც მას თან ერთვის აქტიური არეები, უწოდებენ რუკა-სურათით. გარეგნულად ასეთი რუკა არაფრით არ განსხვავდება ჩვეულებრივი სრათისაგან, მაგრამ ამავე დროს, იგი შეიძლება დაიყოს სხვადასხვა ფორმის უხილავ ზონებად, სადაც თითოეული არედან ემსახურება როგორც ბმული. ელემენტი <area> ადგენს არეების ფორმას, მის ზომებს, ადგენს დოკუმენტის მისამართს რომელზეც უნდა გაკეთდეს ბმული. <area> ყოველთვის მდებარეობს კონტეინერში <map>, რომელიც აკავშირებს არეების კოორდინატებს სურათთან.

რამდენიმე არემ შეიძლება გადაფარონ ერთმანეთი, თავზე იქნება ის, რომელიც ზემოთ მდებარეობს HTML კოდში.

სურათები და მულტიმედია

სინტაქსი¶

<map>
  <area href="მისამართი" />
</map>

დამხურავ ტეგს არ საჭიროებს.

ატრიბუტები¶

alt: ალტერნატიული ტექსტი სუარათის არესთვის.
coords: აქტიური არეების კოორდინატები.

download

href: ადგენს დოკუმენტის მისამართს, რომელზეც უნდა გადავიდეს.
hreflang: მიუთითებს იმ დოკუმენტის ენაზე, რომელზეც ბმულს გადავყავართ.

media

rel

shape: არეების ფორმა.
target: ფრეიმის სახელი, სადაც ბრაუზერი ჩატვირთავს დოკუმენტს.
type: ადგენს იმ დოკუმენტის MIME-ტიპს, რომელზეც ბმულს გადავყავართ.

ასევე ამ ელემენტისთვის ხელმისაწვდომია უნივერსალური ატრიბუტები.

alt¶

ატრიბუტი alt აყენებს ალტერნატიულ ტექსტს სურათის არეებისთვის. ასეთი ტექსტი არ არის ნაჩვენები ბრაუზერში, მაგრამ საძიებო სისტემებს შეუძლიათ წაიკითხონ.

სინტაქსი

<area alt="<ტექსტი>" />

მნიშვნელობა

ნებისმიერი შესაფერისი ტექსტი.

ნაგულისხმევი მნიშვნელობა

არა.

coords¶

ატრიბუტი coords აყენებს არეების კოორდინატებს, მას ასევე უწოდებენ «ცხელ არეს». ასეთი არე შეიძლება იყოს ფაილის ბმული ან დაკავშირებულია სკრიპტის მიერ განსაზღვრულ მოქმედებასთან.

კოორდინატების მნიშვნელობები არის მძიმით გამოყოფილი რიცხვების ერთობლიობა. თუ ორი სფერო ერთმანეთს გადაფარავს, პრიორიტეტს ენიჭება მას, რომელიც განისაზღვრება HTML კოდში ზემოდან.

სინტაქსი

<area
  coords="<კოორდინატი 1>, <კოორდინატი 2>, <კოორდინატი 3>, ..."
/>

მნიშვნელობა

კოორდინატების ნაკრები განისაზღვრება «ცხელი არეს» ფორმით, რომელიც მითითებულია ატრიბუტით shape. კოორდინატების დათვლა ჩვეულებრივ ტარდება სურათის მარცხენა ზედა კუთხიდან და მითითება ხდება პიქსელებში.

მართკუთხედისთვის (shape="rect") განისაზღვრება ოთხი კოორდინატი — X1, Y1, X2, Y2, როგორც ნაჩვენებია სურ. 1.

სურ. 1. კოორდინატები მართკუთხედისთვის

წრისთვის (shape="circle") განისაზღვრება სამი კოორდინატი — წრის ცენტრის კოორდინატები (X, Y) და მისი რადიუსი (R), როგორც ნაჩვენებია სურ. 2.

სურ. 2. კოორდინატები წრისთვის

მრავალკუთხედისთვის (shape="poly") თანმიმდევრულად არის მითითებული თითოეული ვერტიკალური კოორდინატები (X1, Y1, X2, Y2, :), როგორც ნაჩვენებია სურ. 3.

სურ. 3. კოორდინატები მრავალკუთხედისთვის

ნაგულისხმევი მნიშვნელობა

არა.

href¶

ატრიბუტი href განსაზღვრავს დოკუმენტის მისამართს, რომელზეც უნდა გადავიდეს. ვინაიდან ნებისმიერი ტიპის დოკუმენტი შეიძლება გამოყენებულ იქნას როგორც ბმულის მისამართი, მაშინ ბმულზე გადასვლის შედეგი დამოკიდებულია საბოლოო ფაილზე. ასე რომ, არქივები (ფაილები zip ან rar- ის გაფართოებით) შენახული იქნება ლოკალურ დისკზე. სტანდარტულად, ახალი დოკუმენტი ჩაიტვირთება ბრაუზერის მიმდინარე ჩანართში, ამასთან, ეს ქცევა შეიძლება შეიცვალოს target ატრიბუტის გამოყენებით.

სინტაქსი

<area href="<მისამართი>" />

მნიშვნელობა

როგორც მნიშვნელობა, ფაილის სრული ან ფარდობითი გზა მიიღება, ისევე როგორც JavaScript ფუნქციის მაჩვენებელი.

ნაგულისხმევი მნიშვნელობა

არა.

hreflang¶

ატრიბუტი hreflang მიუთითებს დოკუმენტის ენაზე, რომელსზეც გადადის სურათის აქტიური არეს ბმული.

სინტაქსი

<map>
  <area href="<მისამართი>" hreflang="<ენა>" />
</map>

მნიშვნელობა

ენის კოდი

ნაგულისხმევი მნიშვნელობა

არა.

shape¶

ატრიბუტი shape განსაზღვრავს «ცხელი არეების» ფორმას, რომლის კოორდინატები მითითება ხდება coords ატრიბუტის გამოყენებით.

სინტაქსი

<area shape="circle | default | poly | rect" />

მნიშვნელობა

circle: არე წრის სახით.
default: მიუთითებს მთელ არეზე.
poly: ფართობი მრავალკუთხედის სახით.
rect: მართკუთხა არე.

ნაგულისხმევი მნიშვნელობა

rect

target¶

ატრიბუტი target განსაზღვრავს, როგორ გავხსნათ ბმულები — ახალ ჩანართში, მიმდინარე ჩანართში ან ფრეიმის ფანჯარაში.

სინტაქსი

<area target="<მნიშვნელობა>" />

მნიშვნელობა

როგორც მნიშვნელობა, ფრეიმის სახელი გამოიყენება, მითითებული <iframe> ელემენტის name ატრიბუტით. თუ მითითებულია არარსებული სახელი, მაშინ გაიხსნება ახალი ჩანართი. როგორც დარეზერვირებული სახელები, გამოიყენება შემდეგი.

_blank: ჩაიტვირთება გვერდი ბრაუზერის ახალ ჩანართში.
_self: ჩაიტვირთება გვერდი მიმდინარე ჩანართში.
_parent: ჩაიტვირთება გვერდი ფრეიმ-მშობელში; თუ ფრეიმი არ არის, მაშინ ეს მნიშვნელობა მუშაობს როგორც _self.
_top: აუქმებს ყველა ფრეიმს და ჩაიტვირთება გვერდი ბრაუზერის სრულ ფანჯარაში; თუ ფრეიმი არ არის, მაშინ ეს მნიშვნელობა მუშაობს როგორც _self.

ნაგულისხმევი მნიშვნელობა

_self

type¶

ატრიბუტი type აყენებს დოკუმენტის MIME-ტიპს, რომელსზეც ბმული გადადის. ეს ატრიბუტი ატარებს რეკომენდირებულ თვისებას და შეიძლება გამოყენებულ იქნას მოცემული ტიპის დოკუმენტთან ბმულების სტილიზაციისთვის. ატრიბუტი type უნდა დაემატოს მხოლოდ იმ შემთხვევაში, თუ არსებობს ატრიბუტი href.

სინტაქსი

<area href="<მისამართი>" type="<MIME-ტიპი>" />

მნიშვნელობა

MIME-ტიპი

ნაგულისხმევი მნიშვნელობა

არა.

სპეციფიკაციები¶

აღწერა და მაგალითები¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>AREA</title>
    <style>
      #title {
        line-height: 0;
        /* ვცვლით დიაპაზონს */
      }

      #title img {
        border: none;
        /* ამოიღებთ ჩარჩოს სურათის გარშემო */
      }
    </style>
  </head>

  <body>
    <div id="title">
      <img
        src="https://via.placeholder.com/640x158.png?text=xslt.losst.ge"
        width="640"
        height="158"
        alt="ბავშვთა საგანმანათლებლო ცენტრი"
      />
      <br /><br />
      <img
        src="https://via.placeholder.com/640x30.png?text=xslt.losst.ge"
        width="640"
        height="30"
        alt="საიტის ნავიგაცია"
        usemap="#Navigation"
      />
    </div>
    <p>
      <map name="Navigation">
        <area
          shape="poly"
          coords="113,24,211,24,233,0,137,0"
          href="page/inform.html"
          alt="ინფორმაცია"
        />
        <area
          shape="poly"
          coords="210,24,233,0,329,0,307,24"
          href="page/activity.html"
          alt="ღონისძიებები"
        />
        <area
          shape="poly"
          coords="304,24,385,24,407,0,329,0"
          href="page/depart.html"
          alt="განყოფილებები"
        />
        <area
          shape="poly"
          coords="384,24,449,24,473,0,406,0"
          href="page/techinfo.html"
          alt="ტექნიკური ინფორმაცია"
        />
        <area
          shape="poly"
          coords="449,24,501,24,525,0,473,0"
          href="page/study.html"
          alt="განათლება"
        />
        <area
          shape="poly"
          coords="501,24,560,24,583,0,525,0"
          href="page/work.html"
          alt="სამუშაო"
        />
        <area
          shape="poly"
          coords="560,24,615,24,639,0,585,0"
          href="page/misk.html"
          alt="განსხვავებული"
        />
      </map>
    </p>
  </body>
</html>

ბმულები¶

ტეგი <area> ^{MDN (ქართ.)}