-2

necestio cambiar de una imagen que es un boton a otra seria algo asi: introducir la descripción de la imagen aquí

y que se vuelva asi: introducir la descripción de la imagen aquí

digamos quiero que de la primera imagen se remplaze por la segunda imagen, dandole click a el boton, es posible ? he intentando de todo este es mi codigo:

mi HTML:

       <button class="cora" type="button" >
         <img class="megusta" src="imagenes/me gusta.svg" alt="Me gusta" />
         <!-- <img class="megustaN" src="imagenes/mgnegro.svg" alt="Me gusta" /> -->
       </button>

mi CSS:

         
.megusta {
  cursor: pointer;
}

.megusta:hover {
  opacity: 0.4;
  transition: 0.3s;
}

.megusta:active {
  transform: scale(0.9);
}

.megustaN {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; 
  transition: opacity 0.3s ease-in-out;
}

.cora {
  border: 0;
  background: none;
  padding-left: 10px;
  padding-top: 13px;
}

y aqui mi JS:

// 1.seleccion
const cambiarboton = document.querySelector("megusta")
console.log("cambiarboton", cambiarboton);

cambiarboton.addEventListener("click", function(){

 megusta.style.display = imagen1.style.display === "none" ? "block" : "none";
    megustan.style.display = imagen2.style.display === "none" ? "block" : "none";

});

intentado de todo pero siempre me aprecen los dos corazones,se puede cambiar una imagen por otra haciendo click con js ??

1
  • 3
    Esta pregunta te la respondimos ayer, cual es el problema?? Commented el 25 sept. 2023 a las 19:06

1 respuesta 1

1

Te dejo varios puntos y una idea de solución:

  1. El contenedor de tus corazones (el <button>) tiene un posicionamiento static, lo que hace que se muestre un corazón al lado del otro.
  2. Tu constante cambiarboton no debería de estar apuntando a "megusta" sino a "megustaN"
  3. Puedes resolver este problema sin usar javascript y solo con estilos.

Idea de solución:

.megusta {
  cursor: pointer;
  width: 200px;
}

.megusta:hover {
  opacity: 0;
  transition: 0.3s;
  transform: scale(0.9);
}

.megusta:hover +  .megustaN{
  opacity: 1; 
}

.megustaN {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; 
  transition: opacity 0.3s ease-in-out;
  width: 200px;
}

.cora {
  border: 0;
  background: none;
  padding-left: 10px;
  padding-top: 13px;
}
<button class="cora" type="button" >
   <img class="megusta" src="https://svgsilh.com/svg_v2/24037.svg" alt="Me gusta" />
   <img class="megustaN" src="https://svgsilh.com/svg/1093169.svg" alt="Me gusta" />
 </button>

Te dejo un link en donde puedes ver este ejemplo funcionando: https://codepen.io/giless/pen/zYyjgod

4
  • Buenas, gioless, bienvenido al sitio. Creo que ese no es el efecto deseado. Esta pregunta es un duplicado del mismo usuario que la ha formulado varias veces, puedes ver la respuesta con el efecto deseado aquí
    – RubioRic
    Commented el 28 sept. 2023 a las 7:49
  • Tienes razón @RubioRic, gracias por la aclaración
    – gioless
    Commented el 28 sept. 2023 a las 16:41
  • Nada. Otra cosa, si te fijas, se puede incrustar en la propia respuesta el código javascript de forma que se visualicen sus efectos, sin necesidad de recurrir a páginas externas. Para la siguiente :-)
    – RubioRic
    Commented el 28 sept. 2023 a las 16:47
  • Joya! Muchas gracias
    – gioless
    Commented el 28 sept. 2023 a las 18:08

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.