El mapa de imágenes en JavaScript se usa para navegar por varios enlaces a otras páginas web o algunas secciones de la misma página web desde cualquier imagen en esa página web. El cual es dejar una imagen en una página web, esta imagen dividida en varias secciones, cada sección corresponde a unos enlaces, después de hacer clic en esas secciones de esa imagen, se abren los enlaces. Esta sección de la imagen se conoce como mapa de imagen . Estas secciones tienen diferentes formas, como rectángulo, círculo, etc. La imagen se inserta en la página web usando la etiqueta <img> y debajo de esta etiqueta hay un atributo llamado usemap que define la descripción del mapa en esa imagen. En palabras simples, el mapa de usoEl atributo llama a la descripción del mapa que se aplica a la imagen. Este mapa se define de tal manera que la imagen se divide en algunas secciones. Estas secciones se definen especificando coordenadas de píxeles, que definen los límites de cada sección en la que se puede hacer clic. Hay otra etiqueta <area> que se define debajo del mapa . Bajo esta etiqueta <area> se definen las coordenadas y las formas de cada sección. Estas secciones se conocen como punto de acceso .
Sintaxis:
<img src="GFG.jpg" usemap=#mapName>
<map name="mapName">
<area shape=shapeName coords="x, y" />
<area shape=shapeName coords="x, y, r" />
</map>
El siguiente ejemplo ilustra el mapa de imagen en ES6:
- Ejemplo:
<!Doctype html><html><head><scripttype="text/javascript">function fn(name) {document.getElementById("typ").innerHTML = name;}</script></head><body><center><h1style="color:green;">GeeksforGeeks</h1><b>Mouseover on rectangle and circle</b><br><spanid="typ"style="color:#008000;"></span><br><imgsrc=width="600"height="auto"usemap=#gfg><!--image in which the section are created--><mapname="gfg"><!-- area tag --><!--coordinates are defined for"rectangle" and "circle"--><areashape="rect"coords="75, 60, 250, 200"onmouseover="fn('RECTANGLE')"onmouseout="fn('')"/><areashape="circle"coords="500, 80, 110"onmouseover="fn('CIRCLE')"onmouseout="fn('')"></map></body></html>Salida: En este código, las coordenadas 75, 60, 250, 200 se refieren al rectángulo y las coordenadas 500, 80, 110 se refieren al círculo. En la imagen se crean las secciones correspondientes a las coordenadas, en las que se suceden los eventos.
- Ejemplo 2: En este ejemplo, abriremos un enlace usando un mapa de imagen.
<!Doctype html><html><head><scripttype="text/javascript">function fn(name) {document.getElementById("typ").innerHTML = name;}</script></head><body><center><h1style="color:green;">GeeksforGeeks</h1><b>Mouseover on rectangle and circle</b><br><spanid="typ"style="color:#008000;"></span><br><imgsrc=width="600"height="auto"usemap=#gfg><!--image in which the section are created--><mapname="gfg"><!-- area tag --><!--coordinates are defined for "rectangle" and "circle"--><areashape="rect"coords="75, 60, 250, 200"onmouseover="fn('RECTANGLE')"onmouseout="fn('')"/><areashape="circle"coords="500, 80, 110"onmouseover="fn('CIRCLE')"onmouseout="fn('')"></map></body></html> - Producción:
Publicación traducida automáticamente
Artículo escrito por SoumikMondal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA