Este es mi código. Estoy tratando de ocultar otra imagen detrás de otra y presionar un botón para cambiar qué imagen es visible junto con cambiar el enlace href.
function revealHQ() { var pilaf = document.getElementById('PilafHQ'); var altaf = document.getElementById('altafsung'); // get the current value of the hidden image's display property var displaySetting = altaf.style.display; // now toggle the clock and the button text, depending on current state if (displaySetting == 'block') { // hidden message is visible. hide it altaf.style.display = 'none'; pilaf.style.display = 'block'; } else { // if message is hidden. show it altaf.style.display = 'block'; pilaf.style.display = 'none'; } } .altafsung { border-radius: 15px; overflow: hidden; perspective: 1px; position: absolute; right: 0%; display: block; } .PilafHQ { border-radius: 15px; overflow: hidden; perspective: 1px; position: absolute; right: 0%; display: none; } <a href="https://tse1.mm.bing.net/th/id/OIP.9uW8U7EhqDOzl1-gONQjwAHaGj?pid=ImgDet&rs=1" target="_blank"> <div class="PilafHQ"><img src="Images/Pilaf Castle Entrance cropped.png " alt="Pilaf castle entrance" width="250" height="250"></div> </a> <a href="https://altafs-bazaar.bertry.repl.co/" target="_blank"> <div class="altafsung"><img src="Images/Altaf Bazaar Advert.png" alt="Altaf Sunglasses" width="250" height="250"></div> </a> <img src="Images/walkingbear.gif" alt="polar bear walking 😲" onclick="revealHQ();">Use ID en los elementos cuando desee acceder a byId
Es más sencillo alternar la clase.
También le di una identificación al emoji.
window.addEventListener("load", function() { // when page loads document.getElementById("toggleImage").addEventListener("click", function() { var pilaf = document.getElementById('PilafHQ'); var altaf = document.getElementById('altafsung'); // show one, hide the other altaf.classList.toggle("hide") pilaf.classList.toggle("hide") }); }); .altafsung { border-radius: 15px; overflow: hidden; perspective: 1px; position: absolute; right: 0%; } .PilafHQ { border-radius: 15px; overflow: hidden; perspective: 1px; position: absolute; right: 0%; } .hide { display: none } <a href="https://tse1.mm.bing.net/th/id/OIP.9uW8U7EhqDOzl1-gONQjwAHaGj?pid=ImgDet&rs=1" target="_blank"> <div id="PilafHQ" class="hide"><img src="Images/Pilaf Castle Entrance cropped.png " alt="Pilaf castle entrance" width="250" height="250"></div> </a> <a href="https://altafs-bazaar.bertry.repl.co/" target="_blank"> <div id="altafsung"><img src="Images/Altaf Bazaar Advert.png" alt="Altaf Sunglasses" width="250" height="250"></div> </a> <img id="toggleImage" src="Images/walkingbear.gif" alt="polar bear walking 😲">