script.js

function upDate(previewPic){

    console.log("Mouse Over");
    console.log(previewPic.alt);
    console.log(previewPic.src);

    let imageDiv = document.getElementById("image");

    imageDiv.innerHTML = previewPic.alt;
    imageDiv.style.backgroundImage = "url('" + previewPic.src + "')";
}

function unDo(){

    let imageDiv = document.getElementById("image");

    imageDiv.style.backgroundImage = "url('')";
    imageDiv.innerHTML = "Hover over an image below to display here.";
}

// Chạy khi trang web tải xong
function addTabFocus(){

    console.log("Page Loaded");

    let images = document.querySelectorAll(".gallery img");

    for(let i = 0; i < images.length; i++){

        console.log("Image " + i);

        // Thêm tabindex để có thể dùng phím Tab
        images[i].setAttribute("tabindex","0");

        // Khi ảnh được chọn bằng bàn phím
        images[i].addEventListener("focus", function(){
            console.log("Focus");
            upDate(this);
        });

        // Khi rời khỏi ảnh bằng bàn phím
        images[i].addEventListener("blur", function(){
            console.log("Blur");
            unDo();
        });

    }
}

// Gọi hàm khi trang tải xong
window.onload = addTabFocus;