¡Estoy trabajando en un proyecto y una parte de él es hacer que una imagen desaparezca al pasar el mouse, y reemplazarla con texto en la misma ubicación! Tengo que hacerlo a través de javascript. ¡Soy muy nuevo en el desarrollo web front-end, por lo que cualquier ayuda sería genial!
.main-img1{ height: 400px; width: 600px; margin-top: 80px; background-size: 600px 400px; box-shadow: 10px 10px 5px rgb(24, 22, 22); position: relative; text-align: center; font-size: 25px; color: black; border-radius: 50px; } .img1-text{ display: none; position: absolute; bottom: 8px; left: 150px; <section class="main-body"> <div> <img class="main-img1" src="img/automotive.jpg"> <h1 class="img1-text" id="img1text"> Here are some samples of my automotive photography! I specialize in "Rolling Shots" which are caputring a vehicle in motion, while the background and foreground show the motion.</h1> </div>Puede reemplazar cualquier elemento usando el HTML externo "mágico" como este ...
Primero, le di a su imagen una identificación para facilitar las operaciones de javascript...
<img id="I" class="main-img1" src="img/automotive.jpg">Ahora reemplaza la imagen con un párrafo de texto...
I.outerHTML='<p>Well what do you know!</p>';Para HTML fácil de una línea...
<img onmouseover="this.outerHTML='<p>Well what do you know!</p>';" class="main-img1" src="img/automotive.jpg">En primer lugar, esto es algo muy extraño de hacer en Javascript. Por lo general, los estados de desplazamiento, aparición y desaparición, etc. son manejados por CSS.
para hacerlo en js, debe agregar un detector de eventos mouseover a la imagen para ejecutar una función para capturar el elemento que desea que desaparezca, agregue una clase css para aplicarle "display: none", seleccione el elemento que desea que aparezca y elimine una clase que agregue "display: none" de ella.
suponiendo que tiene una clase 'display-none' en su elemento de texto que le aplica 'display: none', puede hacer esto:
const image = document.querySelector('.main-image1') const text = document.querySelector('.img1-text') image.addEventListener('mouseover', () => { image.classList.add('display-none') text.classList.remove('display-none') }si hicieras esto con css es tan simple como
.image { z-index: 2; } .image:hover { display: none; } .text { z-index: 1; }de esa manera, el texto se coloca detrás de la imagen y cuando pasa el cursor sobre la imagen, desaparece. Esto también tiene la ventaja de que cuando quita el cursor de la imagen para que la imagen vuelva a aparecer donde js deberá decirle explícitamente que lo haga.