HTML <area> coords 属性

Ετικέτα HTML <area>

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

Ιδιότητα coords Καθορίζει τις συντεταγμένες της περιοχής στην εικόνα του πελάτη.

Ιδιότητα coords Ιδιότητα και Ιδιότητα shape Χρησιμοποιούνται μαζί για να καθορίσουν το μέγεθος, το σχήμα και τη θέση της περιοχής.

Συμβουλή:Οι συντεταγμένες του πάνω αριστερού γωνίου της περιοχής είναι 0,0.

Σημείωση:Αν οι συντεταγμένες μιας ετικέτας area συγκλίνουν με άλλες περιοχές, θα χρησιμοποιηθεί η πρώτη ετικέτα area που εμφανίζεται. Ο περιηγητής θα αγνοήσει τις συντεταγμένες που βρίσκονται εκτός των ορίων της εικόνας.

Παράδειγμα

Χρησιμοποιεί την ιδιότητα coords για να καθορίσει τις συντεταγμένες κάθε περιοχής στην εικόνα του πελάτη:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus">
</map>

Δοκιμάστε το προσωπικά

Γλώσσα

<area coords="value">

Τιμή της ιδιότητας

Τιμή Περιγραφή
x1,y1,x2,y2 Καθορίζει τις συντεταγμένες του πάνω αριστερού και κάτω δεξιού γωνίου του ορθογώνιου (shape="rect").
x,y,radius Καθορίζει τις συντεταγμένες του κέντρου και την ακτίνα του κύκλου (shape="circle").
x1,y1,x2,y2,...,xn,yn

Καθορίζει τις συντεταγμένες των ακμών του πολυγώνου.

Αν το πρώτο και το τελευταίο ζευγάρι συντεταγμένων δεν είναι ταυτόσημα, ο περιηγητής θα προσθέσει το τελευταίο ζευγάρι συντεταγμένων για να κλείσει το πολυγώνων (shape="poly").

Περιφερειακή εξήγηση:

Η ιδιότητα coords του ετικέτας <area> καθορίζει τις συντεταγμένες της ευαίσθητης περιοχής του πελάτη για το ποντίκι στην εικόνα του πελάτη. Οι αριθμοί των συντεταγμένων και το νόημα τους εξαρτώνται από το σχήμα της περιοχής που καθορίζεται από την ιδιότητα shape.

Παρακάτω είναι ανα列出 κατάλληλες τιμές για κάθε τύπο σχήματος:

Κύκλος: shape="circle", coords="x,y,z"

Εδώ ο x και ο y καθορίζουν τη θέση του κέντρου του κύκλου ("0,0" είναι οι συντεταγμένες του πάνω αριστερού γωνίου της εικόνας), ο r είναι η ακτίνα του κύκλου σε pixel.

Πολυγώνων: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

Κάθε ζευγάρι "x,y" συντεταγμένων καθορίζει μια κορυφή του πολυγώνου ("0,0" είναι οι συντεταγμένες του πάνω αριστερού γωνίου της εικόνας). Για την οριστική καθορισμό ενός τριγώνου χρειάζονται τουλάχιστον τρία ζευγάρια συντεταγμένων; Υψηλοί πολυγώνων απαιτούν περισσότερες κορυφές.

Ο πολυγώνος θα κλείσει αυτόματα, οπότε δεν χρειάζεται να επαναλάβουμε την πρώτη συντεταγμένη στο τέλος της λίστας για να κλείσουμε την περιοχή.

Ορθογώνιο: shape="rectangle", coords="x1,y1,x2,y2"

Η πρώτη συντεταγμένη είναι η θέση μιας γωνίας του ορθογώνιου, και η άλλη συντεταγμένη είναι η θέση της αντίθετης γωνίας, "0,0" είναι η θέση του πάνω αριστερού γωνίου της εικόνας. Σημειώστε ότι η οριστική περιγραφή του ορθογώνιου είναι μια απλοποίηση της περιγραφής ενός πολύγωνου με τέσσερις γωνίες.

Για παράδειγμα, ο παρακάτω κλάδος XHTML σε ένα εικόνα 100x100 pixel στην κάτω δεξιά τεταρτημόριο, ορίζει μια ευαίσθητη περιοχή για το ποντίκι και μια ουρανίσκο στο κέντρο της εικόνας.

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

Υποστήριξη περιηγητών

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

Ετικέτα HTML <area>