On a webpage, I have a logo that I want to change based on the visibility of another image. The other image is part of a list that fades between images and repeats.
The goal is for Logo1 to display when a specific image is shown, and then switch back to Logo2 for all other images.
Below is the code I am currently using that is not functioning as expected:
document.getElementById("featureImages").addEventListener("change", ChangeLogo3);
function ChangeLogo3() {
var x = document.getElementById("chosenBy");
if (window.getComputedStyle(x).display === "none") {
document.getElementById("homeLogo").src = img.src.replace("/images/defaultImages/Logo1.png", "/images/defaultImages/Logo2.png");
}
}
'featureImages' is the ID of the Div containing all the fading images. None of them have individual IDs except for 'chosenBy', which the event listener should be listening for to become 'display: none'.
Each image in the list is coded like this:
<div style="z-index: 17; position: absolute; display: none; opacity: 0.9999;">
<a target="_self" title="title" href="http://www.example.com">
<img class="image" height="450px" width="980px" alt="Alternative" src="/images/sliderImages/header1.jpg"/></a>
</div>
There are around 17 images in total, each with different content. There is also JavaScript code to enable fading transitions between these images.