1

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 ??

3 respuestas 3

4

Pues en mi experiencia prefiero hacerlo con css y js para poder alternar entre una y otra

// Obtén el elemento div
const miDiv = document.getElementById("miDiv");

// Agrega un evento de clic al div
miDiv.addEventListener("click", function() {
  // Verifica si el div tiene la clase "like"
  if (miDiv.classList.contains("like")) {
    // Si la tiene, quítala
    miDiv.classList.remove("like");
  } else {
    // Si no la tiene, quita la clase "like" y agrega la clase "click"
    miDiv.classList.add("like");

  }
});
.btn{
  width:45px;
  height: 40px; 
  cursor:pointer;
}
.dislike{
  background-image: URL("https://i.imgur.com/iiXhvHQ.png");
  background-size:cover;
}
.like{
  background-position: right;
}
<div id="miDiv" class="btn dislike"></div>

como ves funciona y se ejecuta desde js, si lo llamas de una base solo le tienes que agregar la clase like para mostrarlo cuando muestres la pagina

<div id="miDiv" class="btn dislike like"></div>

OPCION 2

// Obtén el elemento div
const miDiv = document.getElementById("miDiv");

// Agrega un evento de clic al div
miDiv.addEventListener("click", function() {
  // Verifica si el div tiene la clase "like"
  if (miDiv.classList.contains("like")) {
    // Si la tiene, quítala
    miDiv.classList.remove("like");
  } else {
    // Si no la tiene, quita la clase "like" y agrega la clase "click"
    miDiv.classList.add("like");

  }
});
.btn{
  width:45px;
  height: 40px; 
  cursor:pointer;
}
.dislike{
  background-image: URL("https://i.imgur.com/TWwQ3oI.png");
  background-size:cover;
}
.like{
  background-image: URL("https://i.imgur.com/IINhZb3.png");
}
<div id="miDiv" class="btn dislike"></div>

4
  • Hola gracias por responder la verdad la imagen que puse en la pregunta solo era una referencia de lo que quiero realizar tengo dos fotos una del corazon vacio y otra del corazon negro :/ el 25 sep. a las 6:37
  • por eso te deje el ejemplo por que así solo cargas una imagen y no tienes que hacer mas que moverla o situar el background-position para que se ve una u otras, incluso puedes tener la cantidad de imágenes que desees.
    – John
    el 25 sep. a las 21:12
  • osea esque son dos imagenes diferentes y si solo subo una cuando la muevo no dara el resultado, tengo que digamos remplazar la primera imagen cuando de click por las segunda imagen(que es del corazon negro) lamento la confusion el 25 sep. a las 23:41
  • @FabricioArciniega ya revisa la oprion2 que agregue es para 2 imagenes en lugar de una
    – John
    el 26 sep. a las 13:04
2

Usa una sola etiqueta <img>, y cambia dinámicamente la propiedad src:

<body>
  <button class="cora" type="button">
    <img class="megusta" src="halfstar.png" alt="Me gusta" />
  </button>
  <script src="scripts2.js" defer></script>
</body>

JS

const img1 = 'halfstar.png' // rutas de las imagenes
const img2 = 'fullstar.png'
let imgelement = document.querySelector('.megusta') // imagen

imgelement.addEventListener('click', (e) => {
  if(e.target.src.endsWith(img1)) e.target.src = img2 // si la propiedad src termina con una de las rutas, asignar otra
  else e.target.src = img1 // y visceversa
})

De este modo se alterna entre una imagen a otra con una sola etiqueta, uso la propiedad de los string endsWith() por si corres la web en un servidor local como LiveServer.

3
  • Hola intente correrlo pero no se no me funciono o no se si estoy haciendo bien las cosas. En la parte que dice // rutas de las imagenes debo poner la direccion del src de la imagen del html ? y de donde saco la ruta de img2 ? el 25 sep. a las 6:40
  • @FabricioArciniega tenes que cambiar las rutas que puse por las 2 que tenes en tus etiquetas img, 'imagenes/me gusta.svg' y 'imagenes/mgnegro.svg' el 25 sep. a las 7:06
  • esas rutas van en img y img2 respectivamente el 25 sep. a las 7:07
2

Perdón que voy a comenzar preguntando.

  • Si tienes un SVG, que tal si lo que haces es cambiarle el color?
  • ¿Que tal que no usamos nada de JavaScript?

La lógica va a ser super simple.

  1. Tienes un checkbox, al final necesitas saber "¿Le gusta? Checked.

  2. Luego tienes el svg pendiente de que dice ese checkbox y que cambie a rojo. Al svg le puse un class heart para darle más especificidad.

    :checked+svg.heart {fill: red;}

Listo. Esa es la lógica, pero detallemos.

  1. Ahora escondemos el checkbox

    input {display: none;}

Pero para que puedas tocar el corazón, lo metemos todo en un label. Veamos el html básico.

<style>
  :checked+svg.heart {fill: red;}
  input {display: none;}
</style>
<label>
  <input type="checkbox"><svg class="heart"></svg>
</label>

Así de simple. Por supuesto tienes que preparar tu svg. Quítale el fill, y ese fill inicial lo puedes cambiar con otro estilo CSS.

También será buena idea asignarle classes para que no afectes todo tu sitio web.

Acá te dejo el fiddle. https://jsfiddle.net/Rafael_/hpmnkorL/2/

Por supuesto todavía tienes que enviar el formulario, pero eso ya es cuestión de que tal vez lo envíes a través de Ajax u otra cosa, pero eso ya es aparte.


Si por alguna razón, quieres las dos imágenes, porque una es un corazón, y la otra es una salamandra, la lógica usando solo CSS sigue siendo super fácil.

<style>
  svg.heart {display: block;}
  svg.heart+svg.salamandra {display: none;}
  :checked+svg.heart {display: none;}
  :checked+svg.heart+svg.salamandra {display: block;}
</style>
<label>
  <input type="checkbox">
  <svg class="heart"></svg>
  <svg class="salamandra"></svg>
</label>

Como puedes ver es simplemente si el objeto es hermano y viene después de. Y otra vez, sin JavaScript. I♥CSS

No pongo el fiddle, porque no tengo un svg de salamandra. Aunque prefiero la idea del SVG solo, ya que además puedes ponerle transiciones, y también animaciones.

3
  • Las preguntas o aclaraciones se realizan como comentarios, revisar Cómo responder, saludos.
    – Jorgesys
    el 27 sep. a las 22:55
  • No estoy aclarando, ni preguntando en realidad. Es un recurso literario.
    – Rafael
    el 28 sep. a las 1:38
  • 1
    @Rafael excelente respuesta, me gusto mucho el simplificar y dejar el uso se JS, podria usarlo en los videojuegos y asi libero un poco de recursos para otras cosas 👍👍👍👍👍👍
    – John
    el 4 oct. a las 13:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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