Создание интерактивного информационного окна на веб-странице с помощью JavaScript
JavaScript позволяет делать веб-страницы более интерактивными и информативными. Одним из способов улучшить взаимодействие пользователя с сайтом является создание информационных окон, которые отображают дополнительную информацию при наведении курсора на элемент. Давайте рассмотрим простой пример кода, который позволяет создать подобное информационное окно на веб-странице.
Описание кода:
function showTagOnHover(event) {
const hoveredElement = event.target;
const tagName = hoveredElement.tagName.toLowerCase();
// Создание информационного окна
const infoBox = document.createElement('div');
infoBox.textContent = `Наведен элемент с тегом: ${tagName}`;
infoBox.style.position = 'fixed';
infoBox.style.padding = '10px';
infoBox.style.backgroundColor = 'white';
infoBox.style.border = '1px solid black';
infoBox.style.zIndex = '9999'; // Помещаем окно поверх остальных элементов
// Добавление окна на страницу
document.body.appendChild(infoBox);
// Функция для перемещения окна
function moveInfoBox(x, y) {
infoBox.style.top = `${y + 10}px`;
infoBox.style.left = `${x + 10}px`;
}
// Функция для проверки наложения элементов
function checkOverlap(x, y) {
const elementBelowCursor = document.elementFromPoint(x, y);
if (elementBelowCursor && elementBelowCursor !== infoBox) {
return true; // Есть наложение
}
return false; // Нет наложения
}
// Перемещение окна при движении курсора
function onMouseMove(event) {
const x = event.clientX;
const y = event.clientY;
if (checkOverlap(x, y)) {
const newTop = y - infoBox.clientHeight - 20;
const newLeft = x - infoBox.clientWidth - 20;
moveInfoBox(newLeft < 0 ? 10 : newLeft, newTop < 0 ? 10 : newTop);
} else {
moveInfoBox(x, y);
}
}
document.addEventListener('mousemove', onMouseMove);
// Удаление окна при уходе курсора
hoveredElement.addEventListener('mouseout', () => {
infoBox.remove();
document.removeEventListener('mousemove', onMouseMove);
});
}
// Добавление обработчика события для отслеживания наведения курсора
document.addEventListener('mouseover', showTagOnHover);
Запуск в консоли браузера:
-
Откройте консоль браузера: Нажмите
F12или щелкните правой кнопкой мыши на странице и выберите «Инспектировать» (Inspect), затем перейдите на вкладку «Console» (Консоль). -
Вставьте код: Вставьте код JavaScript в консоль и нажмите
Enter. -
Наведите на элементы: Теперь при наведении курсора на элементы страницы появится информационное окно с тегом элемента.
Обратите внимание, что этот код реагирует на событие mouseover, поэтому для его тестирования необходимо наводить курсор мыши на элементы страницы.
Заключение:
Этот простой код на JavaScript демонстрирует создание интерактивного информационного окна, которое появляется при наведении курсора на элемент веб-страницы. Используйте его в своих проектах для улучшения пользовательского опыта и предоставления дополнительной информации о содержимом страницы.
