<html>
<title> 마우스를 따라 다니는 문자 </title>
<head>

<script>
var textfont="굴림"; //font종류
var textsize=12; //font size
var textcolor="ffffff"; //font color
var letterspace=12; //문자 간격
var msg=new Array( ) //문자열을 담을 배열을 생성한다.
msg[0]="마우스를 따라다녀요"; //첫번째문자열을 배열에 담는다.
msg[1]="글자두 바뀌구요^^"; //두번째문자열을 배열에 담는다.
msg[2]="정말 재미있죠?"; //세번째문자열을 배열에 담는다.
msg[3]="죽을 때 까지 따라 다닐꼬양~^^"; //네번째문자열을 배열에 담는다.
var maxloop=50; //문자열이 바뀌는 간격을 설정한다.
var x,y; //변수x,y선언
var step=20; //변수 step을 20으로 초기화
var flag=0; //변수 flag를 0으로 초기화
var timer; //변수 timer를 변수선언
var msglength=msg[0].length-1; //첫번째 문자열배열의 길이를 구한다.
var i_mes=0; //변수 i_mes을0으로선언
var loopcounter=0;//변수 loopcounter을 0으로선언
var xpos=new Array();// x위치를 담는 배열
var ypos=new Array();// y위치를 담는배열
for (i=0; i<=msg.length-1;i++) { // i값을 증가시키며 각 배열을 설정한다.
 msg[i]=msg[i]+" "; //문자배열뒤에 스페이스 삽입
}

for (i=1; i<=msg.length-1;i++) {//문자배열의 길이만큼 반복
 //현문자배열의 길이가 이전문자배열의 길이보다 크다면, 현재문자배열의 길이를 msglength에 담음
 if(msg[i].length-1 >= msg[i-1].length-1) {msglength=msg[i].length-1}
}

for (i=0; i<=msglength-1;i++) {//현재 문자열의 길이만큼 반복하며
 xpos[i]=0; //xpos 배열값 초기화
 ypos[i]=0; //ypos 배열값 초기화
}

//넷스케이프의 경우 fontsize 지정
if (document.layers) { //문자열의 길이를 정한다.
 if (textsize>20) {textsize=6}
 else if (textsize>20) {textsize=5}
 else if (textsize>14) {textsize=4}
 else if (textsize>10) {textsize=3}
 else if (textsize>8) {textsize=2}
 else if (textsize<=7) {textsize=1}
}

//브라우저별로 마우스 이동시 x,y 좌표를 구함
function handlerMM(e){ //마우스의 위치를 구하는 함수
 x = (document.layers) ? e.pageX : event.clientX;
 y = (document.layers) ? e.pageY : event.clientY;
 flag=1; //마우스 좌표를 구한후 플래그를 1로 세팅한다
}

function makesnake( ) { //문자열을 출력하는 함수
 if (flag==1 && loopcounter<=maxloop) {//플래그가 1이고 - 좌표를 구했고 - 루프카운터가 최고가 아닌경우
  for (i=message.length-1; i>=1; i--) { //문자열의 길이만큼 거꾸로 반복
   xpos[i]=xpos[i-1]+step; //xpos에 이전값 + step값 지정 <- step을 지정하는 이유는 문자열이 커서를 가리지 않기위함
   ypos[i]=ypos[i-1]; //ypos에 이전값 지정;
  }
  xpos[0]=x+step; //xpos의 0번 배열값을 현재의 위치 + step 지정
  ypos[0]=y; // ypos의 0번 배열값을 현재의 위치 지정

  //브라우저가 익스플로러일때
  if (document.all) {
   for (i=0; i<message.length-1; i++) {//문자열의 길이만큼 반복
    var thisspan = eval("document.all.span"+(i)+".style"); //span 태그의 style 객체를 thisspan변수에 할당
    thisspan.posLeft=xpos[i]; //스타일의 posLeft 속성에 xpos값 지정
    thisspan.posTop=ypos[i]; //스타일의 posTop 속성에 ypos값 지정
   }
  }
  //브라우저가 넷스케이프 일때
  if (document.layers) {
   for (i=0; i<message.length-1; i++) { //문자열의 길이만큼 반복
    var thisspan = eval("document.span"+i); //span태그의 객체를 thisspan변수에 할당
    thisspan.left=xpos[i]; //객체의 left속성에 xpos 값 지정
    thisspan.top=ypos[i]; //객체의 top속성에 ypos값 지정
   }
  }
  loopcounter++; //루프 카운터 증가
  timer=setTimeout("makesnake( )",20); //지정된 시간에 makesnake()함수를 실행한다.
 } else { //플래그가 1이 아니거나 루프카운터가 초과한경우
  clearTimeout(timer); //setTimeout 메소드로 설정된 타임아웃을 취소한다.
  clearmessage( ); //clearmessage()함수를 호출한다.
 }
}

function clearmessage( ) { //문자열을 지우는 함수
 loopcounter=0; //루프카운터 초기화
 if (document.all) { //익스플로러 인경우
  for (i=0;i<=msglength;i++) { //문자열의 길이만큼 반복
   var thisspan = eval("document.all.span"+i); //span객체를 thisspan변수에 할당
   thisspan.innerHTML=" "; //span태그의 html값을 비움
   var thisspan = eval("document.all.span"+(i)+".style"); //span태그의 style객체를 thisspan 변수에 할당
   thisspan.posLeft=-5000; //span태그의 posLeft 값을 -5000으로 세팅
  }
 }
 if (document.layers) {// 넷스케이프의 경우
  for (i=0;i<=msglength;i++) { //문자열의 길이만큼 반복
   var thisspan = eval("document.span"+i+".document"); //span 태그의 document 객체를 thisspan변수에 할당
   thisspan.left=-5000; //span 객체의 left 속성을 -5000으로 세팅
   thisspan.write("<p> </p>"); //span 태그에 공백을 삽입
   thisspan.clear( ); //span 태그 초기화
   thisspan = eval("document.span"+i); //span 객체를 thisspan에 할당
  }
 }
 changemessage( ); //changemessage 함수 실행
}

function changemessage( ) { //문자열을 변화시키며 보여주는 함수
 var messa=msg[i_mes]; //현재 문자열을 messa변수에 지정
 message=messa.split(""); //현재 문자열을 음절단위로 쪼개서 message배열에 담음
 if (document.all) {//익스플로러의 경우
  for (i=0;i<=message.length-1;i++) { //문자배열의 길이만큼 반복
   var thisspan = eval("document.all.span"+i); //span객체를 thisspan변수에 할당
   thisspan.innerHTML="<p style='font-family:"+textfont+";font-size:"+textsize+";color:"+textcolor+"'>"+message[i]+"</p>"; //span 태그에 문구를 출력
  }
 }
 if (document.layers) {//넷스케이프의 경우
  for (i=0; i<message.length-1; i++) { //문자배열의 길이만큼 반복
   var thisspan=eval("document.span"+i+".document"); //span 태그의 document객체를 thisspan변수에 할당
   thisspan.write("<p><font size="+textsize+" color="+textcolor+" face="+textfont+">"+message[i]+"</font></p>"); //span 태그에 문구를 출력
   thisspan.clear( ); //span태그에 문자출력 종료
  }
 }
 i_mes++; //문자배열 포지션 증가
 //i_mes가 문자배열의 크기보다 커지면 0으로 초기화
 if (i_mes>=msg.length) {i_mes=0}
 i_path=0; //i_path값 초기화
 timer=setTimeout("makesnake( )",50) // 1/200초후에 makesnake 함수 실행
}
</script>

<STYLE>
/*span class의 속성지정, 절대위치, x위치*/
.spanstyle {
position:absolute;
left:-5000px;
}
.explainstyle { /*explainstyle class의 속성지정, 절대위치, y위치,x위치,너비,색상,폰트크기,폰트종류*/
position: absolute;
top:140px;
left:80px;
width:440px;
color: ffffff;
font-size:8pt;
font-family:굴림;
}
A { /*Anchor태그의 색상지정*/
color:FF0000;
}
A:Hover { /*Anchor태그에 마우스가 올려졌을경우의 색상지정*/
color:FFFF00;
}
</STYLE>
</head>

<body onLoad="clearmessage( )" text=white bgcolor=black background="images/bg.jpg" leftmargin=0 topmargin=0>
<!-- body태그 실행시 clearmessage( )함수를 실행시킨다. -->

<table width=800 border=0 cellpadding=0 cellspacing=0>
<tr height=284>
<td background="images/main_01.jpg" valign=bottom> </td></tr>
<tr height=121><td background="images/main_02.jpg" valign=top> </td></tr>
<tr height=195><td> </td></tr></table>


<script>
for (i=0;i<=msglength;i++) {//문자열의 길이만큼 반복
 document.write("<span id='span"+i+"' class='spanstyle'>"); //span태그를 생성한다
 document.write("</span>");
}

if (document.layers){
 document.captureEvents(Event.MOUSEMOVE); //넷스케이프의경우 마우스가 움직일때 이벤트를 캡쳐한다
}
document.onmousemove = handlerMM; //익스플로러의 경우 마우스가 움직일때 handlerMM 함수를 실행한다 - 오버라이딩
</script>


</body>
</html>