Спливаюче зображення при наведенні на посилання
Як відомо, реалізувати спливаючі картинки можна за допомогою jQuery, CSS, а також HTML. У сьогоднішній статті я викладу готовий код цього ефекту, а також наведу декілька прикладів. Кожен скрипт досить простий, створений засобами CSS + HTML. Не стану вас більше мучити і приведу готові рішення!
Спливаюча картинка при наведенні
Сміливіше. Наведи на мене курсор!
При наведенні на текст, відображається прихований графічний контент Сміливіше. Наведи на мене курсор!
Давайте я коротко поясню головні моменти. Щоб вивести спливаюче зображення потрібно звернутися до тегу з атрибутом src і після знака одно в лапках прописати шлях до зображення, попередньо закачавши його в кореневу папку сайту.
тег <а> з обов'язковим параметром href відповідає за створення і відображення посилання (в моєму прикладі це текст).
У разі, якщо елементи сайту зрушили, можна задати зображення ширину і висоту, використовуючи властивість width і heigh. Параметри задаються в пікселях.
Атрибут alt дозволяє пошуковим механізмам більш точно розпізнати, що зображується на зображенні.
Для більшої наочності я виділив ту частину коду, яку ви найімовірніше захочете змінити.
Спливаючий текст при наведенні на посилання
Важливий момент! Кожен з представлених скриптів не шкодить валідності сайту.
Не менш зручною вважаю реалізацію поставленої задачі шляхом додавання спеціального скрипта в файл стилів вашого шаблону, який, як правило, називається style.css.
Спливаюча картинка CSS
Даний варіант вважається менш прийнятним, оскільки дозволяє в якості спливаючих слів і символів використовувати тільки латинські літери. Прописавши кириличні знаки на сайті відобразяться кракозябри, що негативним чином позначиться на валідності сайту. Саме тому в прикладі посилання я використовував англомовні слова.
Код потрібно вставити в самому кінці цього файлу або перед відкривається тегом
.Дякую за увагу і до швидкого на сторінках Stimylrosta.