Una imagen se puede dividir en diferentes áreas en las que se puede hacer clic y vincular mediante un mapa de imagen . El mapa de imágenes se utiliza con fines de navegación.
Un mapa de imagen consta de varias etiquetas:
- img: Especifica la imagen a incluir en el mapa.
- map: Crea un mapa de áreas clicables.
- area: se utiliza dentro del elemento del mapa para definir las áreas en las que se puede hacer clic.
Podemos hacer áreas de las siguientes formas:
- círculo: región circular
- rect: región rectangular
- poli: región en forma de polígono
- predeterminado: región fuera de cualquier forma definida
Ejemplo:
<img src="gfg.png" usemap="map_rect">
<map name="map-rect">
<area shape="rect" coords="18,26,220,226"
href="https://www.geeksforgeeks.org"/>
</map>
Código HTML: En el siguiente ejemplo, vamos a utilizar la forma recta ya que podemos dividir fácilmente el rectángulo en cuatro partes iguales. Los dos primeros valores de la propiedad coords son las coordenadas (x, y) de la esquina superior izquierda . Los números tercero y cuarto son las coordenadas (x, y) de la esquina inferior derecha .
Nota: Las coordenadas (x, y) utilizan la esquina superior izquierda como origen (0, 0).
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 500px;
height: 500px;
border: 1px red solid;
}
h1 {
color: Green;
}
body {
background: white;
margin-top: 4%;
margin-left: 10%;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Creating 4 equal clickable areas in an image</h2>
<img src="gfg.png" alt="usemap" usemap="#gfg_map"/>
<map name="gfg_map">
<!-- dividing rectangle into 4 equal parts -->
<area shape="rect" coords="0,0, 250,250" alt="GFG1"
href="https://www.google.co.in" target="_blank"/>
<area shape="rect" coords="250,0, 500,250" alt="GFG2"
href="https://www.geeksforgeeks.org" target="_blank"/>
<area shape="rect" coords="0,250, 250,500" alt="GFG3"
href="https://github.com" target="_blank"/>
<area shape="rect" coords="250,250, 500,500" alt="GFG4"
href="https://duckduckgo.com" target="_blank"/>
</map>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chetankhanna767 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA