1 min czytania
Pokazywanie zawartości atrybutu ALT po najechaniu na obrazek.
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'); //...
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 = '';
});
}
