nautil logo czarne

Artykuły

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');

// 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