Создание всплывающей анимированной подсказки

Опубликовано MuHyc в Вс, 09/04/2011 - 12:25

Создание всплывающей анимированной подсказки

<html> <head>

<title>noflCKa3Ka</title>

</head>

<script>

function str(txt)

{pi.innerHTML="<marquee>"+txt+"</marquee>" pi.style.left=event.ciientx pl.style.top=event.ciientY pl.style.visibility="visible"} function nstr()

{pl.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 рх. Функция str о вызывается при нахождении указателя мыши над элементом (в нашем случае это текст "Анимирован-

ная подсказка"). В качестве передаваемого параметра используется текстовая строка, содержимое которой и будет текстом подсказки. Введение параметра позволяет использовать одну и ту же функцию str() для создания множества подсказок с разным содержанием. Свойство innerHTML позволяет вставить в метку-контейнер <div> с именем pi метку бегущей строки <marquee>, в которой находится нужный текст (параметр txt). Далее при помощи уже известных свойств clientx и clienty объекта event определяются координаты указателя в момент вызова функции str (), которые присваиваются соответствующим координатам контейнера pi. После этого контейнер делается видимым и работа функции str о завершается. Назначение функции nstr () — скрыть подсказку, после того как указатель выйдет за пределы элемента.