Poniższe narzędzie umożliwi wyświetlenie się w dolnym prawym rogu strony, opisu alternatywnego ilustracji (ALT) na którą najedzie się kursorem.
// Stwórz element div
var altTextDiv = document.createElement('div');
// Ustaw styl dla div
altTextDiv.style.position = 'fixed';
altTextDiv.style.right = '0';
altTextDiv.style.bottom = '0';
altTextDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
altTextDiv.style.color = 'white';
altTextDiv.style.padding = '10px';
altTextDiv.style.zIndex = '1000';
// Dodaj div do strony
document.body.appendChild(altTextDiv);
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
// Dodaj zdarzenie 'mouseover' do każdego obrazka
images[i].addEventListener('mouseover', function() {
// Dodaj atrybut alt obrazka do div
altTextDiv.textContent = this.alt;
});
// Dodaj zdarzenie 'mouseout', aby usunąć tekst po opuszczeniu myszką obrazka
images[i].addEventListener('mouseout', function() {
altTextDiv.textContent = '';
});
}
Instrukcja Wideo
Ekspert ds. dostępności cyfrowej z 5-letnim doświadczeniem, mający na koncie ponad 500 audytów stron i aplikacji mobilnych. Jest absolwentem Akademii Morskiej w Gdyni. Poza pracą profesjonalną, jest pasjonatem sportu i psychologii, co przekłada się na jego funkcję prezesa Stowarzyszenia Aktywne Kosakowo. Jego zrozumienie technicznych i ludzkich aspektów dostępności pochodzi z połączenia wiedzy zawodowej z zainteresowaniami osobistymi.
