Эту технику JavaScript можно использовать для многих эффектов, включая всплывающие подсказки и карты изображений.
Интерактивные веб-сайты могут обеспечить более привлекательный опыт для пользователей. Есть много способов сделать веб-сайт более интерактивным, например, добавить анимацию, всплывающие подсказки или другие дополнительные эффекты.
Некоторые веб-сайты также отображают информацию, когда пользователь наводит курсор на элемент на странице. Сюда входят карты или другие визуальные данные, которые позволяют пользователю навести курсор на изображение, чтобы просмотреть точку данных с помощью всплывающей подсказки.
Вы можете добиться этого эффекта с помощью HTML, CSS и JavaScript, используя определенные методы CSS и концепции JavaScript DOM.
Изображения могут быть полезным способом передачи информации на веб-странице в визуально привлекательной форме. Они также полезны для добавления других привлекательных эффектов, таких как простая галерея изображений.
Вы можете добавить всплывающую подсказку к изображению в HTML, используя CSS и JavaScript.
Код, используемый в этом проекте, доступен в этом репозиторий GitHub по лицензии MIT.
- В новый файл с именем index.html добавьте базовую структуру HTML-файла:
HTML>
<HTML>
<голова>
<заголовок>Пример подсказки к изображениюзаголовок>
голова>
<тело>тело>
HTML> - Внутри тега body добавьте контейнер div. Этот div будет включать в себя как изображение, так и элементы всплывающей подсказки:
<дивсорт="контейнер">див> - Внутри контейнера добавьте изображение. Убедитесь, что изображение с совпадающим именем файла находится в той же папке, что и ваш HTML-файл:
<изображениеисточник="изображение.jpg"сорт="изображение"высота="420"ширина="840"альтернативный="Твой образ"> - Под изображением добавьте div для представления всплывающей подсказки:
<дивсорт="подсказка">див> - В теге head добавьте тег стиля. Внутри тега стиля добавьте стили для контейнера изображения и всплывающей подсказки:
<стиль>
.контейнер {
позиция: родственник;
отображать: встроенный блок;
}
.подсказка {
позиция: абсолютный;
левый: 0;
отображать: никто;
набивка: 5пикс.;
фоновый цвет: #000;
цвет: #ффф;
размер шрифта: 12пикс.;
}
стиль> - Создайте новый тег script в нижней части тега body:
<тело>
Содержание вашей веб-страницы здесь<сценарий>
сценарий>
тело> - Внутри тега скрипта использовать селектор DOM функция querySelector для получения HTML-элементов изображения и всплывающей подсказки:
константа изображение = документ.querySelector('.изображение');
константа подсказка = документ.querySelector('.подсказка'); - Добавьте прослушиватель событий для наведение мыши событие. Эта функция запускается при наведении курсора мыши на изображение. В этом случае на экране появится всплывающая подсказка:
image.addEventListener('навести указатель мыши', () => {
tooltip.style.display = 'блокировать';
}); - Добавьте прослушиватель событий для мышь событие. Эта функция запускается, когда мышь покидает изображение. Когда это произойдет, всплывающая подсказка исчезнет с экрана:
image.addEventListener('мышь вне', () => {
tooltip.style.display = 'никто';
}); - Откройте файл index.html в любом браузере и наведите указатель мыши на изображение, чтобы просмотреть всплывающую подсказку:
Как рассчитать и отобразить координаты пикселей X и Y изображения
Теперь, когда всплывающая подсказка видна на странице, измените ее положение и текст, чтобы отобразить координаты X и Y мыши.
- Измените стиль CSS всплывающей подсказки, чтобы всплывающая подсказка не была видна до того, как вы наведете курсор на изображение. Это не позволит вам увидеть всплывающую подсказку в нижней части изображения, прежде чем перейти к местоположению курсора:
.подсказка {
позиция: абсолютный;
вершина: -30px;
левый: 0;
отображать: никто;
набивка: 5пикс.;
фоновый цвет: #000;
цвет: #ффф;
размер шрифта: 12пикс.;
} - Внутри тега script добавьте еще один прослушиватель событий, чтобы прослушивать движение мыши событие. Эта функция будет выполняться непрерывно каждый раз, когда ваша мышь наводит курсор на новый пиксель. Добавьте параметр события, который будет вводить информацию о движение мыши событие в функцию. Эта информация включает в себя координаты изображения, в которых находится мышь в этой точке:
image.addEventListener('переместить мышь', (д) => {}); - Используя событие, измените горизонтальное положение всплывающей подсказки с помощью CSS-свойства left. Каждый раз, когда мышь перемещается, это значение будет обновляться в соответствии с координатами X курсора, хранящимися в клиентX переменная:
tooltip.style.left = e.clientX + 'пкс'; - Измените вертикальное положение всплывающей подсказки, используя свойство CSS top. Клиент Y представляет координаты y мыши. смещениеВысота включает любые дополнительные отступы или границы внутри всплывающей подсказки. Поскольку вам не нужна всплывающая подсказка прямо там, где находится курсор, вы можете удалить дополнительные 10 пикселей из позиции:
tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'пкс'; - Измените текстовое содержимое всплывающей подсказки для отображения координат:
подсказка.textContent = `Х: ${e.offsetX}, Д: ${е.смещениеY}`; - Откройте файл index.html в любом браузере и наведите указатель мыши на изображение, чтобы просмотреть обновленную подсказку:
Добавление эффектов на вашу интерактивную веб-страницу
Теперь вы знаете, как добавить интерактивную подсказку к изображению на веб-странице. Вы можете продолжать совершенствовать свои навыки работы с HTML и CSS, экспериментируя с другими интересными эффектами HTML.
