This is my code. I'm trying to hide another image behind another and make a button press switch which image is visible along with changing the href link.
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 on the elements when you want to access byId
It is simpler to toggle the class
I gave the emoji an ID too
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 😲">