¿Qué es el mapeo de imágenes?
En el mapeo de imágenes, una imagen se especifica con cierto conjunto de coordenadas dentro de la imagen que actúan como áreas de hipervínculo a diferentes destinos. Es diferente de un enlace de imagen, ya que en el enlace de imágenes, una imagen se puede utilizar para servir a un solo enlace o destino, mientras que en una imagen asignada, diferentes coordenadas de la imagen pueden servir a diferentes enlaces o destinos.
Elementos necesarios para mapear una imagen:
Hay tres elementos html básicos que se requieren para crear una imagen mapeada.
- Mapa: se utiliza para crear un mapa de la imagen con áreas en las que se puede hacer clic.
- Imagen: se utiliza para la fuente de imagen sobre la que se realiza el mapeo.
- Área: se utiliza dentro del mapa para definir áreas en las que se puede hacer clic.
Pasos para crear una imagen mapeada:
- Determinación del tamaño de la imagen:
determinar el tamaño de la imagen es muy importante porque si se cambia el tamaño de la imagen, las coordenadas del área también requerirán una actualización.
- Crear un mapa para superponer la imagen:
- Determine las coordenadas de las áreas que desea mapear:
se puede hacer en tres formas que son rectángulo, círculo y polígono. Las coordenadas se pueden encontrar fácilmente usando MS-Paint.
Reúna todos los pasos anteriores como se hace en el código a continuación.
<!DOCTYPE html> <html> <h3>Mapping an Image <body> <p>Click on the different continents of the map to know about them.</p> <img src="world-map-151576_960_720.png" width="960" height="492" alt="World Map" usemap="#worldmap"> <map name="worldmap"> <area shape="rect" coords="184, 36, 272, 158" alt="north america" href="https://en.wikipedia.org/wiki/North_America"> <area shape="rect" coords="282, 215, 354, 367" alt="south america" href="https://en.wikipedia.org/wiki/South_America"> <area shape="rect" coords="506, 151, 570, 333" alt="africa" href="https://en.wikipedia.org/wiki/Africa"> <area shape="rect" coords="618, 42, 791, 162" alt="asia" href="https://en.wikipedia.org/wiki/Asia"> <area shape="rect" coords="509, 44, 593, 110" alt="europe" href="https://en.wikipedia.org/wiki/Europe"> <area shape="rect" coords="786, 288, 862, 341" alt="australia" href="https://en.wikipedia.org/wiki/Australia_(continent)"> <area shape="rect" coords="249, 463, 760, 488" alt="antartica" href="https://en.wikipedia.org/wiki/Antarctica"> </map> </body> </html>
Producción :
Fuente de la imagen: https://www.pixabay.com/photo/2013/07/12/16/57/world-map-151576_960_720.png
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA