Всплывающая подсказка
Воскресенье, 22 августа 2010 г.Рубрика: Учебник CSS
Метки: css | всплывающая подсказка
Просмотров: 1643
Подписаться на комментарии по RSS
На большинстве сайтов, Вы могли всё чаще встречать всплывающую подсказку к интересующей Вас ссылке или картинке. Но если просто у картинок прописывать alt, то будет подсказка стандартного вида, а не такая, как на большинстве сайтов, а именно - красивая, и функциональная, с возможностью добавлять в подсказку картинку, или сделать фон подсказки в виде картинки с скруглёнными углами и с тенью. Для реализации этой затеи нам понадобится css, hmtl и javascript. Некоторые начинающие веб-мастера когда слышат слово javascript, то не понимают что это, или они наслышаны о том, что javascript затормаживает работу сайта, так и есть, только если не злоупотреблять javascript'ом, то и работа сайта не будет заторможена. Вы могли встречать работу javascript в формах добавления комментария - мы говорим про добавление смайлов или bb-кода в форму комментария, именно javascript осуществляет добавление данных через кнопку в форму.
Перейдём к созданию всплывающей подсказки:
Для начала создадим css таблицу стилей под названием style.css
И в ней пропишем стиль для подсказки под названием - floatTip:
#floatTip {<BR> position: absolute; /* Абсолютное позиционирование */<BR> width: 250px; /* Ширина блока */<BR> display: none; /* Прячем от показа */<BR> border: 1px solid #0099ff; /* Рамка подсказки */<BR> padding: 4px; /* Отступы вокруг текста */<BR> font-family: sans-serif; /* Рубленый шрифт */<BR> font-weight: bold; /* Устанавливаем жирный шрифт */<BR> font-size: 0.75em; /* Размер шрифта */<BR> color: #fafafa; /* Цвет текста */<BR> background: #00C1FF; /* Цвет фона */<BR>}<BR>Это весь не большой код. Все подсказки в коде. Вы конечно же можете изменять стиль подсказки как захотите, и если Вы захотите поставить свой фон с рамкой, то просто задайте толщину рамки в 0px.
Теперь перейдём к созданию javascript кода для подсказки. Он нам понадобится для корректного отображения во всех браузерах, и для того чтобы подсказка всегда была рядом с курсором, если тот находится на картинке.
Теперь создадим файл tooltip.js в той же директории, что и css файл:
document.onmousemove = moveTip;<BR>function moveTip(e) {<BR> floatTipStyle = document.getElementById("floatTip").style;<BR> w = 250; // Ширина слоя<BR><BR> // Для браузера IE<BR> if (document.all) { <BR> x = event.x + document.body.scrollLeft; <BR> y = event.y + document.body.scrollTop; <BR><BR> // Для остальных браузеров<BR> } else { <BR> x = e.pageX; // Координата X курсора<BR> y = e.pageY; // Координата Y курсора<BR> }<BR><BR> // Показывать слой справа от курсора <BR> if ((x + w + 10) < document.body.clientWidth) { <BR> floatTipStyle.left = x + 'px';<BR><BR> // Показывать слой слева от курсора<BR> } else { <BR> floatTipStyle.left = x - w + 'px';<BR> }<BR><BR> // Положение от верхнего края окна браузера<BR> floatTipStyle.top = y + 20 + 'px';<BR>}<BR><BR>function toolTip(msg) {<BR> floatTipStyle = document.getElementById("floatTip").style;<BR> if (msg) {<BR><BR> // Выводим текст подсказки<BR> document.getElementById("floatTip").innerHTML = msg;<BR> // Показываем слой<BR> floatTipStyle.display = "block";<BR> } else { <BR> // Прячем слой<BR> floatTipStyle.display = "none";<BR> } <BR>}<BR>Мы выносим javascript код в отдельный файл, для удобства обращения к нему, и для моментального редактирования на всех страницах, где есть наша подсказка. Если же его не выносить, а прописывать на каждой странице, где мы захотим поместить нашу мощную подсказку, то на редактирование около сотни страниц, у Вам придётся потрать очень много времени и сил.
Теперь перейдём к созданию html файла, в котором хотим отображать нашу подсказку.
Для начала создадим файл index.html в той же директории, где и файлы со скриптом и css таблицей:
<html><BR><head><BR><title>CSS чебник</title><BR><link rel="stylesheet" type="text/css" href="style.css"/><BR><script type="text/javascript" src="tooltip.js"></script><BR></head><BR><body><BR><img src="img.png" onMouseOver="toolTip('Это подсказка работает на javascript и css, и не тормозит сайт')" onMouseOut="toolTip()"><BR><div id="floatTip"></div><BR></body><BR></html><BR>В голове сайта мы подключаем файл с javascript. Потом в теле документа пишем тег картинки, в нём ссылаемся на картинку и при помощи команд onMouseOver и onMouseOut заставляем javascript работать. Если вы хотите изменить текст подсказки, то прописывайте его в команду onMouseOver. После тега img пишем тег div, с id стиля нашей подсказки.
