En el presente artículo, aprenderemos sobre el atributo de forma de la etiqueta de área HTML y cómo se puede usar para especificar la forma del área en HTML5.
Usamos el atributo de forma del elemento de área para especificar la forma y se puede combinar con el atributo de coordenadas para especificar la forma, el tamaño y la ubicación del área.
Sintaxis:
<area shape="default/rect/circle/poly" coords="coordinate1, corordinate2..." href="link" alt="alternate text">
Valores de atributos de forma con sus funcionalidades y atributos de coordenadas:
- predeterminado: se utiliza para especificar la región completa de un área en HTML.
Coordenadas: No tiene coordenadas ya que abarca toda el área. - rect: Se utiliza para definir una región rectangular.
Coordenadas :- x 1 , y 1 para arriba a la izquierda.
- x 2 , y 2 para abajo a la derecha.
- círculo: Se utiliza para definir una región circular.
Coordenadas :- x, y para el centro del círculo.
- rad para el radio del círculo.
- poly: Se utiliza para definir una región poligonal.
Coordenadas:- x 1 , y 1 , x 2 , y 2 … x n , y n para las aristas del polígono.
Nota: si el primer y el último par de coordenadas son diferentes, el último par de coordenadas se usará para cerrar el polígono.
Lo anterior se ha resumido en una forma tabular a continuación:
| Funcionalidad | Valor de atributo | coordenadas |
| Para especificar toda la región. | defecto | (define toda la región) |
| Para definir una región rectangular. | rectificar |
x 1 , y 1 , x 2 , y 2 – primeros 2 para arriba a la izquierda Los dos siguientes para la esquina inferior derecha de rectángulo |
| Para definir una región circular. | circulo |
x, y, rad – primeras dos coordenadas del centro de círculo y el último el radio. |
| Para definir una región poligonal. | escuela politécnica |
x 1 , y 1 , x 2 , y 2 , …, x n , y n – coordenadas de los bordes del polígono. En caso de que el primer y último par de coordenadas sean diferentes, la última coordenada se usará el par para cerrar el polígono. |
A continuación hay un par de ejemplos para ilustrar este atributo.
Ejemplo 1:
index.html
<!DOCTYPE html> <html> <body> <img class="img" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210307115411/Gfgshapes2-300x147.png" usemap="#map-gfg"/> <map name="map-gfg"> <area shape="rect" coords="15,32,145,104" href="https://www.geeksforgeeks.org/" alt="GFG home page" target="_blank"/> <area shape="poly" coords="242,28.5,279.5,63.5,242,104,200,63.5" href= "https://practice.geeksforgeeks.org/courses/dsa-self-paced?gclid= Cj0KCQiA7YyCBhD_ARIsALkj54qc8HT6TPpLZAcGs-r2DF38ZnTHpNJ1cVIw1PqHj4e15x-34tSr6oYaAjwUEALw_wcB" alt="GFG data-structures course" target="_blank" /> </map> </body> </html>
Salida: aquí, la parte del rectángulo de la imagen está vinculada a la página oficial de GeeksForGeeks, y la parte del polígono está asignada al curso DSA por geeks para geeks. Al hacer clic en cualquiera, se dirigirá al usuario al enlace particular asociado con la forma. Establecemos las coordenadas de una forma particular de acuerdo con la imagen elegida por nosotros.
Aquí hay un breve gif para demostrar la funcionalidad del ejemplo anterior.
Ejemplo 2:
index2.html
<!DOCTYPE html> <html> <body> <center> <img class="img" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210313125027/gfgshapeseg2-300x145.png" usemap="#map-gfg"/> </center> <map name="map-gfg"> <area shape="circle" coords="91,56,30" href= "https://media.geeksforgeeks.org/wp-content/uploads/20210313125218/circle-300x145.png" alt="Filled Circle" target="_blank"/> <area shape="rect" coords="166,32,218,84" href= "https://media.geeksforgeeks.org/wp-content/uploads/20210313125412/sq-300x145.png" alt="filled square" target="_blank"/> </map> </body> </html>
Salida: Aquí, tenemos un círculo y un cuadrado (usamos rect como un valor de atributo incluso para esto).
Publicación traducida automáticamente
Artículo escrito por dikshapatro y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA