Перейти к содержанию

<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 (ქართ.)