Heim > Web-Frontend > CSS-Tutorial > Koordni (HTML -Attribut)

Koordni (HTML -Attribut)

Lisa Kudrow
Freigeben: 2025-02-26 09:40:09
Original
353 Leute haben es durchsucht

Das in einem coords -Element verschriebene <a></a> -Treiberattribut, das in <object></object> -Elements verwendet wird, erstellen Sie clientseitige Bildkarten. Dies liefert klickbare Regionen in einem Bild, ähnlich wie die Verwendung von <area> Elementen mit einem <map></map>. Erforschen wir die Unterschiede und die Verwendung coords.

Bildkarte Beispiel:

Betrachten Sie dieses Bild:

coords (HTML attribute)

Methode 1: Verwenden von <area> Elementen (herkömmliche Bildkarte):

Dieser Ansatz verwendet <area> Elemente in einem <map></map>, um klickbare Regionen zu definieren:

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174053401375600.png"  class="lazy" alt="coords (HTML attribute) " />
<map name="Map">
  <area shape="rect" coords="132,117,270,185" href="https://www.php.cn/link/cf57d08a994170907f4f367c647e075e" alt="Monday's mustache - 'The Hero'">
  <area shape="poly" coords="136,238,137,301,3,306,3,242" href="https://www.php.cn/link/206f6a7ada917912e9389da75d80be3b" alt="Thursday's mustache - 'The Weasel'">
</map>
Nach dem Login kopieren

Methode 2: Verwendung <a> Elemente innerhalb <object> (alternativer Ansatz):

Diese Methode bettet das Bild mit <object> mit <a> ein und platziert Links (coords) innen unter Verwendung shape und

:
<object data="mustaches.png" type="image/png" width="276" height="375" usemap="#Map2">
  <map name="Map2">
    <ul>
      <li><a href="https://www.php.cn/link/cf57d08a994170907f4f367c647e075e" shape="rect" coords="132,117,270,185">Monday's mustache - 'The Hero'</a></li>
      <li><a href="https://www.php.cn/link/206f6a7ada917912e9389da75d80be3b" shape="poly" coords="136,238,137,301,3,306,3,242">Thursday's mustache - 'The Weasel'</a></li>
    </ul>
  </map>
</object>
Nach dem Login kopieren

<ul></ul> Der <object></object> bietet Fallback -Inhalt für Browser, denen die richtige

-Ausstützung fehlt.

coords Attributwerte:

coords Die Attributwerte shape hängen vom Attribut

ab:
  • rect (Rechteck): x1,y1,x2,y2
  • (obere linke x, obere linke y, unten rechts x, unten-rechte y-Koordinaten).
  • circ (Kreis): x,y,r
  • (Mittelmitte x, Mitte y, Radius).
  • poly (Polygon): x1,y1,x2,y2,x3,y3,...
  • (Eine Reihe von x, y -Koordinaten, die die Eckpunkte des Polygons definieren).

häufig gestellte Fragen (FAQ):

coords Der bereitgestellte FAQ -Abschnitt ist bereits umfassend und beschreibt die Verwendung und Einschränkungen des Attributs

genau. Es sind keine Änderungen erforderlich.

Das obige ist der detaillierte Inhalt vonKoordni (HTML -Attribut). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage