HTML код:
<html>
<head>
<title>1</title>
<script>
var globSpan = 0;
var timerSlideText;
function slideText(txt, beginX, beginY, endX, endY, color, size, styles, font, opacity) {
if (!globSpan) // перед первым запуском функции элемент <span id="slideText"> ещё не создан
{
slideSpan = document.createElement('span'); // поэтому создаём
globSpan = 1;
slideSpan.id = 'slideSpan';
slideSpan.style.position = 'absolute';
document.documentElement.lastChild.appendChild(slideSpan); // и прикрепляем к body
}
window.clearInterval(timerSlideText); // если таймер запущен, его надо очистить. На каждом шаге
if (txt == '0x0001=STOP') // стоп-сигнал. Если нужно принудительно остановить выполнение и скрыть текст (курсор уходит с кнопки), то вызываем slideText('0x0001=STOP');
{
document.getElementById('slideSpan').innerHTML = ''; // она просто убирает текст из span'а
return;
}
beginY += Math.ceil((endY - beginY) / 6); // приращиваем начальное положение по вертикали
beginX += Math.ceil((endX - beginX) / 6); // и по горизонтали
opacity = (opacity) ? opacity : 0.01; // инициализируем прозрачность
opacity += Math.ceil((100 - opacity * 100) / 6) / 100; // и делаем ей прирост.
font = (font) ? font : 'arial'; // инициализация шрифта
slideSpan = document.getElementById('slideSpan'); // для краткости обращаемся к span'у
slideSpan.style.top = beginY;
slideSpan.style.left = beginX;
slideSpan.style.opacity = opacity;
if (navigator.appName=='Microsoft Internet Explorer')
{
slideSpan.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
}
slideSpan.style.fontSize = (size) ? size : 12; // инициализация размера шрифта
slideSpan.style.color = (color) ? color : 'white'; // инициализация цвета шрифта
slideSpan.style.fontWeight = (styles == 'bold' || styles == 'bold-italic') ? 'bold' : 'normal';
slideSpan.style.fontStyle = (styles == 'italic' || styles == 'bold-italic') ? 'italic' : 'normal';
slideSpan.style.fontFamily = font;
slideSpan.innerHTML = txt;
if (beginY != endY || beginX != endX || opacity < 1) // если процесс движения или появления не завершён, выполняем эту же функцию ещё раз
{
timerSlideText = window.setInterval("slideText('" + txt + "', " + beginX + ", " + beginY + ", " + endX + ", " + endY + ", '" + color + "', '" + size + "', '" + styles + "', '" + font + "', " + opacity + ")", 25);
}
}
</script>
</head>
<body>
<!-- на событие onmouseover вызываем функцию с параметрами:
'Coutty' - текст, который будет всплывать - обязательный параметр
300, 250 - с этой точки (x, y) будет начинаться движение - обязательный параметр
300, 280 - в этой точке (x, y) движение будет заканчиваться - обязательный параметр
'red' - цвет шрифта. Необязательный параметр. По умолчанию - белый. Можно указывать в формате '#12F3E1'
12 - размер шрифта - необязательный параметр. по умолчанию 12
'bold' - стиль шрифта. Необязательный параметр. По умолчанию - normal. Можно указать 'bold' / 'italic' / 'bold-italic'
'tahoma' - имя шрифта. Необязательный параметр. По умолчанию - arial.
0 - начальная прозрачность. Необязательный параметр. Если указать 1, то текст сразу будет видим, а не с эффектом плавного появления
Понятно, что если хочется указать, скажем, имя шрифта, то надо указывать ВСЕ параметры, стоящие до него
-->
<a href=# onmouseover="slideText('Coutty', 300, 250, 300, 280, 'red', 12, 'bold', 'tahoma', 0); return false;" onmouseout="slideText('0x0001=STOP'); return false;" style='position:absolute; top:300px; left:300px'>LINK</a>
</body>
</html>
Конечно, много буковков в самой функции, но вызывать можно всего с пятью первыми параметрами.
Проверял на работоспособность в Opera 9.60, FF2 и IE6.
