마우스 끝에 효과를 부여합니다. 그림을 주는게 아니라 텍스트의 색을 달리 하여 마치 이미지효과를 부여하네요
데모를 눌러 확인하세요.



Script Example
<html>
<head><title>홈제작바이블</title>
<STYLE TYPE="text/css">
<!--
BODY{
overflow:scroll;
overflow-x:hidden;
}
.s1 { position:absolute; font-size:10pt; color:blue; visibility:hidden; }
.s2 { position:absolute; font-size:18pt; color:red; visibility:hidden; }
.s3 { position:absolute; font-size:14pt; color:gold; visibility:hidden; }
.s4 { position:absolute; font-size:12pt; color:lime; visibility : hidden; }
//-->
</STYLE>

</head>

<body>

<DIV ID="div1" CLASS="s1">*</DIV>
<DIV ID="div2" CLASS="s2">*</DIV>
<DIV ID="div3" CLASS="s3">*</DIV>
<DIV ID="div4" CLASS="s4">*</DIV>


<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
var nav = (document.layers);
var tmr = null;
var spd = 50;
var x = 0;
var x_offset = 5;
var y = 0;
var y_offset = 15;
if(nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;
function get_mouse(e)
{    
  x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft;
  y = (nav) ? e.pageY : event.clientY+document.body.scrollTop;
  x += x_offset;
  y += y_offset;
  beam(1);    
}
function beam(n)
{
  if(n<5)
  {
    if(nav)
    {
      eval("document.div"+n+".top="+y);
      eval("document.div"+n+".left="+x);
      eval("document.div"+n+".visibility='visible'");
    }  
    else
    {
      eval("div"+n+".style.top="+y);
      eval("div"+n+".style.left="+x);
      eval("div"+n+".style.visibility='visible'");
    }
    n++;
    tmr=setTimeout("beam("+n+")",spd);
  }
  else
  {
     clearTimeout(tmr);
     fade(4);
  }  
}

function fade(n)
{
  if(n>0)
  {
    if(nav)eval("document.div"+n+".visibility='hidden'");
    else eval("div"+n+".style.visibility='hidden'");
    n--;
    tmr=setTimeout("fade("+n+")",spd);
  }
  else clearTimeout(tmr);
}
// -->
</SCRIPT>


마우스를 움직여보세요. 마우스 끝을 보세요
</body>
</html>


설명
head 태그 사이에 들어가는 코드와 body 태그 사이에 들어가는 코드의 색을 달리 했습니다. 유심히 보시고 자신의 홈에 적용시켜 보세요