Maison > interface Web > tutoriel CSS > Coords (attribut HTML)

Coords (attribut HTML)

Lisa Kudrow
Libérer: 2025-02-26 09:40:09
original
353 Les gens l'ont consulté

L'attribut coords, utilisé dans <a></a> Éléments imbriqués à l'intérieur d'un élément <object></object>, vous permet de créer des cartes d'image côté client. Cela fournit des régions cliquables dans une image, similaire à l'utilisation d'éléments <area> avec un <map></map>. Explorons les différences et comment utiliser coords.

Exemple de carte d'image:

Considérez cette image:

coords (HTML attribute)

Méthode 1: Utilisation des éléments <area> (carte d'image traditionnelle):

Cette approche utilise des éléments <area> dans un <map></map> pour définir les régions clickables:

<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>
Copier après la connexion

Méthode 2: Utilisation des éléments <a> dans <object> (approche alternative):

Cette méthode incorpore l'image en utilisant <object> et place des liens (<a>) à l'intérieur, en utilisant coords et shape:

<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>
Copier après la connexion

le <ul></ul> fournit du contenu de secours pour les navigateurs manquant de support <object></object> approprié.

coords Valeurs d'attribut:

Les valeurs d'attribut coords dépendent de l'attribut shape:

  • rect (rectangle): x1,y1,x2,y2 (supérieur-gauche x, haut-gauche, x inférieur x, coordonnées en bas-droit en bas).
  • circ (cercle): x,y,r (Centre x, centre y, rayon).
  • poly (polygone): x1,y1,x2,y2,x3,y3,... (une série de x, y coordonnées définissant les sommets du polygone).

Questions fréquemment posées (FAQ):

La section FAQ fournie est déjà complète et décrit avec précision l'utilisation et les limitations de l'attribut coords. Aucun changement n'est nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal