49 lines
1.8 KiB
JavaScript
49 lines
1.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
document.querySelectorAll('.sidebar #hover').forEach(link => {
|
|
const img = link.querySelector('.icon');
|
|
const defaultSrc = img.getAttribute('data-default-image');
|
|
const hoverSrc = img.getAttribute('data-hover-image');
|
|
const activeSrc = img.getAttribute('data-active-image');
|
|
|
|
console.log(`Link: ${link.href}`);
|
|
console.log(`Default: ${defaultSrc}, Hover: ${hoverSrc}, Active: ${activeSrc}`);
|
|
|
|
// Function to reset all links to default state
|
|
function resetAllLinks() {
|
|
document.querySelectorAll('.sidebar #hover').forEach(l => {
|
|
const lImg = e.querySelector('.icon');
|
|
e.classList.remove('active1');
|
|
e.classList.add('active');
|
|
eImg.src = lImg.getAttribute('data-default-image');
|
|
});
|
|
}
|
|
|
|
// On Hover
|
|
link.addEventListener('mouseenter', () => {
|
|
if (!link.classList.contains('active1')) {
|
|
console.log(`Mouse enter: ${link.textContent}`);
|
|
img.src = hoverSrc;
|
|
}
|
|
});
|
|
|
|
// On Mouse Leave
|
|
link.addEventListener('mouseleave', () => {
|
|
console.log(`Mouse leave: ${link.textContent}`);
|
|
img.src = link.classList.contains('active1') ? activeSrc : defaultSrc;
|
|
});
|
|
|
|
// Click Event to Set Active State
|
|
link.addEventListener('click', (e) => {
|
|
resetAllLinks()
|
|
link.classList.add('active1');
|
|
img.src = activeSrc;
|
|
console.log(`Click: ${link.textContent}`);
|
|
});
|
|
|
|
// On Page Load, set the image for active state
|
|
if (link.classList.contains('active1')) {
|
|
img.src = activeSrc;
|
|
}
|
|
});
|
|
});
|