HTML <map> ετικέτα

  • Προηγούμενη σελίδα <main>
  • Επόμενη σελίδα <mark>

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

<map> η ετικέτα

<map> στοιχείου η ιδιότηταείναι Element <img> του στοιχείου η ιδιότητα συνδεδεμένα, δημιουργώντας μια σχέση μεταξύ εικόνας και χάρτη.

<map> περιέχει μερικά Element <area>，προσδιορίζει την περιοχή κλικ του εικονικού χάρτη.

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

Εγχειρίδιο HTML DOM:Όνειρο

παράδειγμα

παράδειγμα 1

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

<img src="life.png" alt="Life" 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="Coffee" href="coffee.html">
</map>

Προσπαθήστε το προσωπικά

παράδειγμα 2

ένα άλλο εικονικό χάρτη με δυνατότητα κλικ

<img src="solarsystem.png" width="1024" height="576" alt="Planets" 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>

Προσπαθήστε το προσωπικά

Ιδιότητα

Ιδιότητα Αξία Περιγραφή
name Όνομα χάρτη Απαιτείται. Ορίζει το όνομα της εικόνας χάρτη.

Γενικές ιδιότητες

<map> Η ετικέτα υποστηρίζει επίσης Γενικές ιδιότητες στο HTML.

ιδιότητες συμβάντος

<map> Η ετικέτα υποστηρίζει επίσης Αντικειμενικές ιδιότητες στο HTML.

Προεπιλεγμένες ρυθμίσεις CSS

Οι περισσότεροι περιηγητές θα εμφανίσουν τα εξής προεπιλεγμένα <map> Εлемент:

map {
  display: inline;
}

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη
  • Προηγούμενη σελίδα <main>
  • Επόμενη σελίδα <mark>