Отображение текста при наведении на изображение в HTML/JS

Быстрый ответ

Для отображения текста при наведении курсора на изображение в HTML необходимо использовать атрибут title, который добавляется к элементу <img>:

<img src="your-image.jpg" alt="Описание изображения" title="Текст при наведении" />

Для создания индивидуальных подсказок следует обернуть тег <img> в контейнер <div> и применить тег <span> для текста:

<div class="tooltip">
  <img src="your-image.jpg" alt="Описание изображения">
  <span class="tooltiptext">Индивидуальный текст для подсказки</span>
</div>

Используйте CSS для стилизации вашей подсказки:

.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

Динамическое управление отображением текста при помощи JavaScript

JavaScript позволяет добавить к подсказкам больше интерактивности. События onmouseover и onmouseout позволяют динамически управлять отображением текста:

function showTooltip(element, text) {
    var tooltip = document.createElement('div');
    tooltip.innerHTML = text;
    tooltip.classList.add('js-tooltiptext');
    document.body.appendChild(tooltip);
    element.onmousemove = function(e) {
        tooltip.style.top = (e.pageY + 10) + 'px';
        tooltip.style.left = (e.pageX + 10) + 'px';
    };
}
function hideTooltip() {
    var tooltips = document.querySelectorAll('.js-tooltiptext');
    tooltips.forEach(function(tooltip) {
        tooltip.remove();
    });
}

Примените эти функции, используя события mouseover и mouseout:

<img src="your-image.jpg" alt="Описание изображения" onmouseover="showTooltip(this, 'Текст при наведении')" onmouseout="hideTooltip()">

Не забудьте стилизовать динамические подсказки.

Размышления о доступности и подсказках

Доступность подсказок играет ключевую роль. Некоторые вспомогательные технологии могут не распознавать атрибут title, поэтому рекомендуется использовать aria-label, aria-labelledby или aria-describedby для создания доступных интерфейсов.

Визуализация

Рассмотрим пример: на изображении (🖼️) при наведении курсора появляется подпись (✍️). Может быть так:

<img src="picture.png" alt="Изображение" title="✍️ Наведите курсор, чтобы увидеть подпись!">

Вот как это работает: ваш курсор (🖱️) наталкивается на подпись (✍️) при навигации по странице:

Обычная страница:  🖼️📄💻
Событие наведения: ✍️📄💻 (Подпись появляется, как детектив находит ключевой след!)

Это просто, увлекательно и абсолютно точно.

Создание эффектов наведения для сенсорных устройств

Поскольку сенсорные устройства не обладают курсором, эффекты наведения необходимо адаптировать. Используйте нажатия или жесты для отображения информации, обеспечивая при этом комфортный пользовательский опыт на всех устройствах:

@media (hover: none) {
    .tooltip:hover .tooltiptext,
    .tooltip:focus-within .tooltiptext {
        visibility: visible; /* Теперь ваша подсказка доступна на сенсорных устройствах */
    }
}

Увлекайте пользователей интерактивными подсказками на изображениях

Интерактивные подсказки повышают вовлеченность пользователя. В подсказках можно использовать не только текст, но и изображения или кнопки:

<div class="interactive-tooltip">
  <img src="interactive-image.jpg" alt="Интерактивное изображение">
  <div class="interactive-content"> Изучите новую функцию! <button>Нажмите, чтобы начать!</button></div>
</div>

Для создания более динамичного интерактивного взаимодействия можно использовать CSS-переходы и анимации.

Полезные материалы

1. title – HTML: HyperText Markup Language | MDN – Основная информация об атрибуте title в HTML-элементах.
2. HTML Global title Attribute – Примеры использования атрибута title.
3. CSS Tooltip – Руководство по созданию стильных и интерактивных подсказок.
4. CSS Positioning 101 – A List Apart – Помощь в разъяснении основ позиционирования в CSS.
5. WebAIM: Alternative Text – Обсуждение вопросов доступности при использовании атрибута title.