HTML es un lenguaje de marcado que se utiliza para diseñar páginas web. Cuando necesitamos hacer que una imagen también funcione como un enlace, usamos la etiqueta <a> pero en esta etiqueta, nuestra imagen completa se vincula a una sola página. ¿Qué haremos si queremos que cada parte de la imagen se vincule a diferentes recursos? Por lo tanto, esta etiqueta de mapa entra en escena. Con el mapa, podemos crear diferentes áreas en las que se puede hacer clic en una imagen. Contiene varias regiones activas que cada una vincula a diferentes partes de una imagen.
Pasos para agregar un mapa de hits en una imagen en HTML:
Inserte una imagen: Primero, inserte una imagen usando la etiqueta <img> y agregue el atributo usemap dentro de la etiqueta img como se muestra a continuación.
HTML
<!DOCTYPE html> <html> <head> <title>Add hit map in image</title> </head> <body> <!-- Added a picture using img tag and inserted usemap attribute with a value--> <img src="gfg.png" alt="demo image" usemap="#hitmap"> </body> </html>
Crear mapa: después de agregar una imagen, agregue un elemento de mapa usando la etiqueta <map> y vincule la imagen a ese mapa usando el atributo name y use el mismo valor que hemos usado en el atributo usemap como se muestra a continuación.
HTML
<!DOCTYPE html> <html> <head> <title>Add hit map in image</title> </head> <body> <!-- Added picture using img tag and inserted usemap attribute with a value--> <img src="gfg.png" alt="demo image" usemap="#hitmap"> <!-- Added map tag and inserted name attribute with the value we used in usemap--> <map name="hitmap"></map> </body> </html>
Ahora agregue los atributos en la etiqueta del mapa: Usaremos los siguientes atributos dentro de la etiqueta del mapa .
- área : crearemos áreas en las que se puede hacer clic a través de esta etiqueta.
- forma : definiremos formas dentro de áreas con la ayuda de estos valores: rect, circle, poly, default.
- coords : definiremos las coordenadas de las áreas en las que se puede hacer clic según la forma en términos de píxeles.
- rect: utilizaremos proporcionar dos coordenadas con las coordenadas x e y para la esquina superior izquierda y la esquina inferior derecha.
- círculo: proporcionaremos las coordenadas x e y del centro, seguidas de la longitud del radio
- poly: proporcionamos las coordenadas x e y de cada esquina. Así que tenemos que tomar al menos 6 valores.
- predeterminado: ocupa toda la imagen.
- href : usaremos esta etiqueta para especificar dónde apuntarán las áreas y qué enlace se abrirá.
HTML
<map name="hitmap"> <!-- For circle coordinates are- first two coords for starting: 1 is from the left & 2 is from the top. and last coordinate is for radius: ex- 150. --> <area shape="circle" coords="1,2,150" href="www.geeksforgeeks.org"> <!-- For rect coordinates are- first two coords for starting: 1 is from the left & 10 is from the top. last two coords for ending: 400 from the left, & 500 from the top. --> <area shape="rect" coords="1,10,400,500" href="www.google.com/gfg"> </map>
Código HTML para crear un mapa en la parte superior de una imagen: en la imagen de abajo, si hace clic en la parte roja, se abrirá Geeksforgeeks.org, pero cuando haga clic en la parte verde, se abrirá Google.com .
Hemos utilizado dos etiquetas de área de forma recta y declarado su valor de coordenadas según la posición. Necesitamos asignar a Geeksforgeeks o google. Después de eso, hemos usado etiquetas href para abrir sus enlaces web. El código para esto se menciona a continuación para el mismo.
HTML
<!DOCTYPE html> <html> <head> <title>Add hit map in image</title> </head> <body> <!-- Added picture using img tag and inserted usemap attribute with a value--> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210922063041/pic.jpg" alt="picture" usemap="#hitmap"> <!-- Created map tag with name attribute and value that we have used in usename --> <map name="hitmap"> <!-- Added areaa tags with shape, coords & href attributes--> <area shape="rect" coords="0,0,200,200" alt="Gfg" href="https://ide.geeksforgeeks.org/"> <area shape="rect" coords="0,200,400,400" alt="Google" href="www.google.com"> </map> </body> </html>
Producción:
Puntos importantes del artículo:
- Primero, verifique las dimensiones de su imagen en las que va a usar el mapa de impacto y luego use las coordenadas de acuerdo con eso.
- El atributo de nombre debe tener el mismo valor que usará en usemap en la etiqueta img.
- Use valores de rectángulo, círculo y poli en el atributo de forma.
- Usar área dentro del atributo del mapa.
Publicación traducida automáticamente
Artículo escrito por iamabhijha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA