У спливающие підказки є іноді необхідністю для пояснення тексту. Підказки, розглянуті раніше. на жаль в браузерах Chrome і Firefox не працюють. Статтю не стала видаляти, вирішивши що нехай це буде як нагадування про помилку. У цій статті ми також будемо розглядати підказку з використанням jQuery, але яка працює в будь-якому браузері.
Трохи про цю підказкою. Підказка відображається при натисканні мишки і при наведенні курсору. Використовується не тільки текст, а й зображення. За допомогою підказки можна робити посилання. Властивості стилів CSS допоможуть змінити фон, колір і текс підказки.
Для того, щоб продовжити роботу скачайте архів файлу SimpleTip. У цьому архіві ви знайдете файл CSS, скрипти для роботи підказки, індексний файл, папку з малюнками.
Розпакуйте файл і розмістіть папку SimpleTip в корені сайту. Підключіть скрипти і стилі на сторінці (не забувайте правильно вказувати шлях до файлів).
Статті по темі: Спливаюча підказка
jQuery скрипт для підказки
Нижче наводиться файл clickTip.js. Скрипт допомагає правильно позиціонувати підказки, додає потрібні класи і спосіб появи. Подивіться на скрипт і пояснення в ньому.
Розміщення на сторінці HTML
Скрипт має три варіанти використання.
1 - посилання присвоєно відповідний клас. Текст підказки розташований в TITLE, посказка повітся при наведенні курсору
Текст підказки розташований в TITLE, поміщаємо його в тег EM і підказка з'являтися при натисканні.
Підказка по кліку
2 - Блок пишемо в ручну, клік-підказка буде відображатися і без скрипта. В цьому випадку міняємо: focus на: hover
РЕЗУЛЬТАТ В БРАУЗЕРІ:
ПРИКЛАД
Анімація картинки css
висувається панель
Підкреслення посилання при наведенні
CSS ефекти при наведенні
Зовнішні посилання на сайті
Підписи до зображення
Зображення зі стрічками
Круглі зображення
Створення абзаців в тексті
Як зробити підказку на jQuery
Обрізка кутів css
Як зробити підказку
Анімація картинки css
Заробіток на Seosprint
Як прибрати слово ярлик
Програма для копіювання посилань
Сайт під мобільну версію
висувається панель
слайдер картинок