Coords (attribut HTML)

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:

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:

<code class="language-html"><img src="/static/imghwm/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></code>

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

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

<code class="language-html"><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></code>

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!