Техника Web-дизайна для студента
Создание всплывающей анимированной подсказки
Рассмотрим создание всплывающей анимированной подсказки на примере текста документа, представленного в листинге 8.24.
Листинг 8.24. Создание всплывающей анимированной подсказки
<html>
<head>
<t i 11е>Подсказка</1 i tle>
</head>
<script>
Function str(txt)
{pi. innerHTML="<marquee>"+txt+"</marquee>" pi. style. left=event. clientX pi. style. top=event. clientY pi. style. visibility="visible"} function nstr()
{pi. style. visibility="hidden"}
</script>
<body>
<pxb onmouseover='str("Это подсказка")' onmouse - out="nstr()"xfont size=5 со1ог="#000080">Анимированная
Подсказка. </fontx/bx/p>
<div id=pl style="position: absolute;visibility: hidden; width: 100;
Background-color: #00FFFF; color: red; border: lpx black solid"x/div>
</body>
</html>
Для размещения подсказки создан невидимый пустой блок с именем pi, имеющий абсолютное позиционирование, ширину 100 рх, фоновую заливку и черную непрерывную рамку толщиной 1 рх. Функция stг () вызывается при нахождении указателя мыши над элементом (в нашем случае это текст "Анимированная подсказка"). В качестве передаваемого параметра используется текстовая строка, содержимое которой и будет текстом подсказки. Введение параметра позволяет использовать одну и ту же функцию str() для создания множества подсказок с разным содержанием. Свойство іппегнтмь позволяет вставить в метку - контейнер <DIV> С именем pi метку бегущей строки <MARQUEE>, в которой находится нужный текст (параметр txt). Далее при помощи уже известных СВОЙСТВ clientx И clientY объекта event определяются координаты указателя в момент вызова функции str о, которые присваиваются соответствующим координатам контейнера pi. После этого контейнер делается видимым и работа функции str о завершается. Назначение функции nstr () — скрыть подсказку, после того как указатель выйдет за пределы элемента. Результат показан на рис. 8.17.
|
Рис. 8.17. Результат создания анимированной подсказки |
