Ετικέτα HTML <area>

Ορισμός και χρήση

<area> Ορίζει τις περιοχές ενός χάρτη εικόνας (η εικόνα είναι ένας χάρτης εικόνας με περιοχές με δυνατότητα κλικ, δηλαδή ένας χάρτης απάντησης του πελάτη).

<area> τοιχείου Ετικέταεσωτερικά.

Σημείωση:στοιχείου στη ατрибούτο με στοιχείου του ΑτрибούτοΣυνδεδεμένα, δημιουργούν συνδέσμους μεταξύ εικόνας και χάρτη.

Για περισσότερες πληροφορίες, δείτε:

Εγχειρίδιο HTML DOM:Άλλοθι

Παράδειγμα

Παράδειγμα 1

Εικόνα με περιοχές με δυνατότητα κλικ:

<img src="life.png" alt="Ζωή" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Καφές" href="coffee.html">
</map>

Try it yourself

Παράδειγμα 2

Διαφορετική εικόνα που περιέχει περιοχές με δυνατότητα κλικ:

<img src="solarsystem.png" width="1024" height="576" alt="Πλανήτες" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Try it yourself

Attribute

Attribute Value Description
alt Text Specify the alternative text of the area. It is required if the href attribute exists.
coords Coordinate values Specify the coordinates of the area.
download Filename Specify what the target will be downloaded when the user clicks the hyperlink.
href URL Specify the hyperlink target of the area.
hreflang Language code Specify the language of the target URL.
media Media query Specify the media/device optimized for the target URL.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Specify the reference information to be sent with the link.
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 Specify the relationship between the current document and the target URL.
shape
  • default
  • rect
  • circle
  • poly
 Specify the shape of the area.
target
  • Frame name
 Specify where to open the target URL.
type Media type Specify the media type of the target URL.

Global attributes

<area> Tags also support Global attributes in HTML.

Event attributes

<area> Tags also support Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <area> Στοιχείο:

area {
  display: none;
}

Υποστήριξη προγράμματος περιήγησης

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη