Esta técnica de JavaScript se puede utilizar para muchos efectos, incluyendo información sobre herramientas y mapas de imágenes.
Los sitios web interactivos pueden proporcionar una experiencia más atractiva para los usuarios. Hay muchas maneras de hacer que un sitio web sea más interactivo, como agregar animaciones, información sobre herramientas u otros efectos adicionales.
Algunos sitios web también muestran información cuando el usuario pasa el cursor sobre un elemento de la página. Esto incluye mapas u otros datos visuales que permiten al usuario pasar el cursor sobre la imagen para ver un punto de datos utilizando una información sobre herramientas.
Puede lograr este efecto usando HTML, CSS y JavaScript usando ciertas técnicas de CSS y conceptos DOM de JavaScript.
Las imágenes pueden ser una forma útil de transmitir información de una manera visualmente atractiva en una página web. También son útiles para agregar otros efectos atractivos, como un galeria de imagenes sencillas.
Puede agregar información sobre herramientas sobre una imagen en HTML usando CSS y JavaScript.
El código utilizado en este proyecto está disponible en este repositorio de GitHub bajo una licencia del MIT.
- En un nuevo archivo llamado index.html, agregue la estructura básica de un archivo HTML:
html>
<html>
<cabeza>
<título>Ejemplo de información sobre herramientas de imagentítulo>
cabeza>
<cuerpo>cuerpo>
html> - Dentro de la etiqueta del cuerpo, agregue un contenedor div. Este div incluirá tanto la imagen como los elementos de información sobre herramientas:
<divisiónclase="envase">división> - Dentro del contenedor, agregue una imagen. Asegúrese de que haya una imagen con un nombre de archivo coincidente dentro de la misma carpeta que su archivo HTML:
<imagenorigen="imagen.jpg"clase="imagen"altura="420"ancho="840"alternativa="Tu imagen"> - Debajo de la imagen, agregue un div para representar la información sobre herramientas:
<divisiónclase="información sobre herramientas">división> - En la etiqueta principal, agregue una etiqueta de estilo. Dentro de la etiqueta de estilo, agregue un poco de estilo para el contenedor de la imagen y la información sobre herramientas:
<estilo>
.envase {
posición: relativo;
mostrar: bloque en línea;
}
.información sobre herramientas {
posición: absoluto;
izquierda: 0;
mostrar: ninguno;
relleno: 5píxeles;
color de fondo: #000;
color: #fff;
tamaño de fuente: 12píxeles;
}
estilo> - Cree una nueva etiqueta de secuencia de comandos en la parte inferior de la etiqueta del cuerpo:
<cuerpo>
El contenido de tu página web aquí<guion>
guion>
cuerpo> - Dentro de la etiqueta del script, usar el selector de DOM función, querySelector, para obtener los elementos HTML de la imagen y la información sobre herramientas:
constante imagen = documento.querySelector('.imagen');
constante información sobre herramientas = documento.querySelector('.información sobre herramientas'); - Agregue un detector de eventos para el ratón sobre evento. Esta función se ejecutará cuando pase el mouse sobre la imagen. Cuando esto ocurre, la información sobre herramientas se mostrará en la pantalla:
imagen.addEventListener('ratón sobre', () => {
información sobre herramientas.style.display = 'bloquear';
}); - Agregue un detector de eventos para el ratón fuera evento. Esta función se ejecutará cuando el mouse abandone la imagen. Cuando esto ocurra, la información sobre herramientas desaparecerá de la pantalla:
imagen.addEventListener('ratón fuera', () => {
información sobre herramientas.style.display = 'ninguno';
}); - Abra el archivo index.html en cualquier navegador y coloque el cursor sobre la imagen para ver la información sobre herramientas:
Cómo calcular y mostrar las coordenadas de píxeles X e Y de la imagen
Ahora que la información sobre herramientas está visible en la página, cambie su posición y su texto para mostrar las coordenadas X e Y del mouse.
- Cambie el estilo CSS de la información sobre herramientas, de modo que la información sobre herramientas no esté visible antes de pasar el cursor sobre la imagen. Esto le impide ver la información sobre herramientas en la parte inferior de la imagen antes de saltar a la ubicación del cursor:
.información sobre herramientas {
posición: absoluto;
arriba: -30px;
izquierda: 0;
mostrar: ninguno;
relleno: 5píxeles;
color de fondo: #000;
color: #fff;
tamaño de fuente: 12píxeles;
} - Dentro de la etiqueta del script, agregue otro detector de eventos, para escuchar el movimiento del ratón evento. Esta función se ejecutará continuamente cada vez que el mouse se desplace sobre un nuevo píxel. Agregue el parámetro de evento, que ingresará información sobre el movimiento del ratón evento en la función. Esta información incluye las coordenadas de la imagen donde se encuentra el mouse en ese punto:
imagen.addEventListener('movimiento del ratón', (e) => {}); - Usando el evento, cambie la posición horizontal de la información sobre herramientas usando la propiedad CSS izquierda. Cada vez que se mueva el ratón, se actualizará el valor para que coincida con las coordenadas X del cursor, almacenadas en el clienteX variable:
información sobre herramientas.estilo.izquierda = e.clientX + 'px'; - Cambie la posición vertical de la información sobre herramientas utilizando la propiedad CSS superior. Cliente Y representa las coordenadas y del ratón. El Altura compensada La propiedad incluye cualquier relleno adicional o bordes dentro de la información sobre herramientas. Como no desea la información sobre herramientas directamente donde está el cursor, puede eliminar 10px adicionales de la posición:
tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px'; - Cambie el contenido del texto de la información sobre herramientas para mostrar las coordenadas:
información sobre herramientas.textContent = `X: ${e.desplazamientoX}, Y: ${e.compensaciónY}`; - Abra el archivo index.html en cualquier navegador y coloque el cursor sobre la imagen para ver la información sobre herramientas actualizada:
Agregar efectos a su página web interactiva
Ahora sabe cómo agregar una información sobre herramientas interactiva sobre una imagen en su página web. Puede continuar mejorando sus habilidades de HTML y CSS experimentando con otros efectos HTML interesantes.