Надпись за курсором мыши

Взгляните на код, а далее мы разберём его на части:

<html;>
<head;>
<style;>
.spanstyle
{
 position:absolute;
 visibility:visible;
 top:-50px;
 font-size:8pt;
 font-family:Verdana;
 font-weight:bold;
 color:#ff0000;
}
</style>
<script; language="JavaScript">
<!--
var x,y
var step=10
var flag=0
var message="JavaPortal!!!"
message=message.split("")
var xpos=new Array()
var ypos=new Array()
for (i=0;i<=message.length;i++)
{
 xpos[i]=-50
 ypos[i]=-50
}
function handlerMM(e)
{
 x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
 y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
 flag=1
}
function makesnake()
{
 if (flag==1 && document.all)
 {
  for (i=message.length; i>=1; i--)
  {
   xpos[i]=xpos[i-1]+step
   ypos[i]=ypos[i-1]
  }
  xpos[0]=x+step
  ypos[0]=y
  for (i=0; i<message.length; i++)
  {
   var thisspan = eval("span"+(i)+".style")
   thisspan.posLeft=xpos[i]
   thisspan.posTop=ypos[i]
  }
 }
 else if (flag==1 && document.layers)
 {
 for (i=message.length; i>=1; i--)
 {
  xpos[i]=xpos[i-1]+step
  ypos[i]=ypos[i-1]
 }
 xpos[0]=x+step
 ypos[0]=y

  for (i=0; i<message.length; i++)
  {
   var thisspan=eval("document.span"+i)
   thisspan.left=xpos[i]
   thisspan.top=ypos[i]
  }
 }
 var timer=setTimeout("makesnake()",30)
}

for (i=0;i<=message.length;i++)
{
 document.write("<span; id='span"+i+"' class='spanstyle'>")
 document.write(message[i])
 document.write("</span>")
}
if (document.layers){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=handlerMM;
//-->
</script>
</head>
<body; onLoad="makesnake()">
</body>
</html>

Первое что можно отметить, это содержимое между тегами <style;> и </style>

.spanstyle
{
 position:absolute;
 visibility:visible;
 top:-50px;
 font-size:8pt;
 font-family:Verdana;
 font-weight:bold;
 color:#ff0000;
}
</style>

Здесь мы указываем стиль структуры в которой будем выводить надпись.
position:absolute - позиционирование;
visibility:visible - видимость;
top:-50px - положение по высоте;
font-size:8pt - размер шрифта;
font-family:Verdana - сам шрифт;
font-weight:bold - начертание;
color:#ff0000 - цвет.
Сюда можно добавить и многое другое, зависит от вашей фантазии.

Далее начинается сам скрипт заключенный между тегами <script; language="JavaScript"> и </script>.

<script; language="JavaScript">
<!--

Объявляем переменные:

var x,y
var step=10
var flag=0
var message="JavaPortal!!!"
var xpos=new Array()
var ypos=new Array()

var x,y -переменные хранят координаты курсора мыши;
var step=10 - расстаяние между символами в надписи;
var flag=0 - флаг - используется далее в скрипте для определения произошло событие или нет;
var message="JavaPortal!!!" - надпись выводимая за курсором мыши;
var xpos=new Array() - массив содержащий x-координаты символов;
var ypos=new Array() - массив содержащий y-координаты символов.

Разбиваем надпись на массив символов:

message=message.split("")

Инициализируем все x и y координаты числом -50, для того чтобы изначально не было видно надписи:

for (i=0;i<=message.length;i++)
{
 xpos[i]=-50
 ypos[i]=-50
}

Объявляем функцию обрабатывающею события от мышки.

function handlerMM(e)
{
 x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
 y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
 flag=1
}

Объявляем функцию реализующею весь алгоритм прорисовки символов.

function makesnake()
{

Здесь функция разделяется на два блока оператором if (в зависимости от структуры документа)

 if (flag==1 && document.all)
 {

Меняем все (кроме начальных) рядом стоящие x-координаты и сдвигаем их на шаг step, так же меняем рядом стоящие y-координаты местами.

  for (i=message.length; i>=1; i--)
  {
   xpos[i]=xpos[i-1]+step
   ypos[i]=ypos[i-1]
  }

Начальную x-координату приравниваем x-координате курсора мышки со здвигом на шаг step, а начальную y-координату просто приравниваем y-координате курсора мышки.

  xpos[0]=x+step
  ypos[0]=y

Тут получаем каждую структуру в переменную thisspan и сдвигаем её в указанные координаты.

  for (i=0; i<message.length; i++)
  {
   var thisspan = eval("span"+(i)+".style")
   thisspan.posLeft=xpos[i]
   thisspan.posTop=ypos[i]
  }
 }

В этом блоке всё то же самое за исключением метода получения структуры.

 else if (flag==1 && document.layers)
 {
 for (i=message.length; i>=1; i--)
 {
  xpos[i]=xpos[i-1]+step
  ypos[i]=ypos[i-1]
 }
 xpos[0]=x+step
 ypos[0]=y

  for (i=0; i<message.length; i++)
  {
   var thisspan=eval("document.span"+i)
   thisspan.left=xpos[i]
   thisspan.top=ypos[i]
  }
 }

Повторяем функцию makesnake() каждые 30 мсек.

 var timer=setTimeout("makesnake()",30)
}

Выводим символы.

for (i=0;i<=message.length;i++)
{
 document.write("<span; id='span"+i+"' class='spanstyle'>")
 document.write(message[i])
 document.write("</span>")
}

Устанавливаем обработчик машки.

if (document.layers){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=handlerMM;
//-->
</script>
</head>

При загрузке выполняем функцию makesnake().

<body; onLoad="makesnake()">
</body>
</html>

ВСЁ