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