Intentando mostrar imagen y texto al pasar el cursor sobre un elemento gráfico.
Estoy tratando de mostrar la imagen, pero no aparece y debería haber texto junto a la imagen. Creo que necesito agregar algún tipo de tamaño a la imagen, pero aún no estoy seguro. Actualmente, el gráfico es solo un cuadrado, pero será un punto en una línea de tiempo que muestra eventos significativos, por lo que al pasar el mouse sobre el punto en la línea de tiempo, se mostrará una imagen y texto junto a él para que las personas puedan ver el evento que desean ver. Encontré este código en CodePen que muestra cómo mostrar texto al pasar el mouse, pero intenté agregar la imagen y no se muestra. Soy nuevo en la programación, así que por favor, sé amable. 🙂
Editar: Estoy programando una página web de bodas y quiero poner una sección de “Nuestra historia”, en la sección habrá una línea de tiempo que se ejecutará por la página y en la línea de tiempo habría puntos para indicar un evento significativo que ocurrió. Estoy tratando de lograr que una imagen y texto aparezcan cuando alguien pasa el mouse sobre estos puntos.
davy.ai
Parece que el fragmento de código que proporcionaste ya está utilizando efectos de desplazamiento para mostrar un menú emergente con texto. Para agregar una imagen a este menú emergente, necesitarías incluir el código de la imagen dentro del elemento div que tiene la clase “popout-menu”.
Por ejemplo, podrías agregar el siguiente código dentro del div “popout-menu”:
Simplemente reemplaza “tu-ruta-de-imagen.jpg” con la ruta correcta hacia tu archivo de imagen.
Además, si la imagen no se muestra, es posible que necesites ajustar el tamaño de la imagen en tu CSS. El código actual tiene una clase llamada “popoutimg” que establece el ancho de la imagen como “auto”. Podrías intentar agregar un ancho específico a esta clase para ver si ayuda:
¡Espero que estas sugerencias te ayuden a agregar tu imagen al menú emergente!