document.addEventListener('DOMContentLoaded', function() { var wrapper = document.querySelector('.wrapper'); // Predefine the backgrounds associated with each person var backgrounds = { 'retreat': 'https://southwestsanctuary.org/wp-content/uploads/2024/09/Frame-56-3-1.png', 'events': 'https://southwestsanctuary.org/wp-content/uploads/2024/09/Frame-56-4-1.webp', 'vacation': 'https://southwestsanctuary.org/wp-content/uploads/2024/09/Frame-56-3-1.png', 'private': 'https://southwestsanctuary.org/wp-content/uploads/2024/09/Frame-56-3-1.png', }; // Predefine gradient backgrounds for hover states var gradientBackgrounds = { 'retreat': 'linear-gradient(45deg, #AF8232, #AF8232)', // Example gradient 'events': 'linear-gradient(45deg, #AF8232, #AF8232)', // Example gradient 'vacation': 'linear-gradient(45deg, #AF8232, #AF8232)', // Example gradient 'private': 'linear-gradient(45deg, #AF8232, #AF8232)', // Example gradient }; // Function to switch the background image and change the element's background color on hover function switchBackground(person, element) { // Change wrapper background image wrapper.style.backgroundImage = `url(${backgrounds[person]})`; // Reset the background color of all elements Object.keys(backgrounds).forEach(key => { var el = document.getElementById(key); if (el) { el.style.background = ''; // Reset background } }); // Set the hovered element's background to the gradient element.style.background = gradientBackgrounds[person]; } // Attach hover event listeners to each container Object.keys(backgrounds).forEach(person => { var element = document.getElementById(person); if (element) { element.addEventListener('mouseenter', function() { switchBackground(person, element); }); } }); });