Hola, acabamos de desarrollar una herramienta OpenSource para ayudar a los desarrolladores, principalmente a los desarrolladores de interfaces de usuario y front-end, con las tareas de mapeo de imágenes. Si eres un principiante, ¿podrías estar confundido? Esta bien. Déjame explicarte todo sobre esta herramienta de mapeo rápido de imágenes y tutorial usando efectos css.
¿Qué es el mapeo de imágenes?
Image Mapping es una herramienta que te ayuda a seleccionar un área de una imagen basada en sistemas de coordenadas. Puede realizar varios cambios en el área seleccionada según sus necesidades.
¿Alguna vez has leído periódicos electrónicos?
Si lee un documento electrónico, puede ver el efecto real del mapeo de imágenes: una sola imagen con muchos enlaces con mapeo de coordenadas, lo que significa que en la imagen de arriba puede ver múltiples enlaces en una sola imagen. En tal caso, el área de una imagen dividida en muchas partes depende de su sistema de coordenadas. Por ejemplo, supongamos un ancho de imagen de 800 píxeles y divídalo en dos partes:
Para el primer bloque: las coordenadas comienzan en (0,0) y se mueven en un polígono, por lo que el siguiente rango será (400,0). Aquí X1=0, Y1=0, X2=400, Y2=0 cuando finalice el movimiento:
Las coordenadas son: 0,0,400,0,400,400,0,400
Los valores son:
X1=0, Y1=0
X2=400, Y2=0
X3=400, Y3=400
X4=0, Y4=400
Para el segundo bloque: Las coordenadas comienzan en (0,0) y se mueven de la siguiente manera:
Los valores son:
X1=400, Y1=0
X2=800, Y2=0
X3=800, Y3=400
X4=400, Y4=400
Coordenadas: 400,0,800,0,800,400,400,0
Formato HTML para el mapeo de imágenes:
Después de elegir la coordenada perfecta para su imagen, debe usar el siguiente formato en su documento HTML:
Primero, debe citar una fuente de su imagen. Esto puede ser local o global, no importa. Después de eso, debe pasar un valor de coordenadas en la etiqueta del mapa como en el ejemplo anterior.
Aplicando CSS al área de mapeo de imágenes:
Aplicar CSS a áreas seleccionadas puede ser bastante difícil, pero no es una gran tarea. Acabo de modificar un complemento para hacer la misma tarea rápidamente y sin su gran esfuerzo. Agregue el siguiente código después de su mapa de imágenes HTML.
El área seleccionada se convertirá a HTML Canvas y se abrirán múltiples opciones para efectos CSS.
También puede probar la herramienta de mapeo rápido de imágenes y el tutorial con efectos CSS desde el siguiente enlace:
Demostración / Generar Consíguelo en GitHub
Eso es todo. Todo estaba hecho, disfruta!!