Для решения этой задачи можно использовать язык программирования JavaScript и CSS.
Шаги решения:
1. Сначала необходимо подключить файлы с изображениями cat_cage.jpg и cat_cage_low.jpg и добавить их в рабочую директорию.
2. В HTML-файле добавить элементы с классом block, которым хотим задать фоновые изображения.
3. В CSS-файле определить стили для класса block, в которых задать изначальное фоновое изображение:
“`css
.block {
background-image: url(“cat_cage.jpg”);
}
“`
4. В JavaScript-файле добавить следующий код:
“`javascript
// Получаем все элементы с классом block
const blocks = document.querySelectorAll(‘.block’);
// Функция для изменения фонового изображения
const changeBackground = (element, image) => {
element.style.backgroundImage = `url(${image})`;
};
// Проходимся по каждому блоку и изменяем фоновое изображение
blocks.forEach((block) => {
// Изменяем на изображение более низкого качества
changeBackground(block, ‘cat_cage_low.jpg’);
// При наведении мыши возвращаем изображение высокого качества
block.addEventListener(‘mouseover’, () => {
changeBackground(block, ‘cat_cage.jpg’);
});
// При уходе мыши возвращаем изображение низкого качества
block.addEventListener(‘mouseout’, () => {
changeBackground(block, ‘cat_cage_low.jpg’);
});
});
“`
Теперь при загрузке страницы все элементы с классом block будут иметь фоновое изображение cat_cage_low.jpg. При наведении мыши на блок будет меняться фоновое изображение на cat_cage.jpg, а при уходе мыши – возвращаться к изображению cat_cage_low.jpg.