Quiero que una imagen en un archivo html cambie de tamaño en un 50 % y vuelva al tamaño normal con un segundo clic. Traté de hacerlo de la misma manera que lo hago con el mouseover pero no funciona. ¿Alguien tiene alguna idea sobre cómo hacer esto en javascript?
código HTML -
<article id="featuredartists"> <h2>Featured Artists</h2> <div class="artistlist group"> <ul class="group"> <li><img src="images/artists/Barot_Bellingham_tn.jpg" alt="Photo of Barot Bellingham" onclick="func3()"></li> </ul> </div> </article>javascript externo -
function func3() { x = document.getElementsByTagName("img")[11]; x.height = 50%; x.width = 50%; }Aquí hay un ejemplo mucho más simple que usa transformaciones. Simplemente cambie una clase al hacer clic.
document.querySelector("img").addEventListener("click", function(){ this.classList.toggle("half"); }); img { transition-duration: 0.4s; } img.half { transform: scale(0.5); } <img src="https://via.placeholder.com/100x100"/> Si realmente desea que cambie el tamaño del elemento y el flujo, puede cambiar el ancho/alto dentro de la clase .half .
document.querySelector("img").addEventListener("click", function(){ this.classList.toggle("half"); }); img { transition-duration: 0.4s; width: 100px; height: 100px; } img.half { width: 50px; height: 50px; } <img src="https://via.placeholder.com/100x100"/>