Java-Script

　残像をつけて、マウスと共に移動するイメージを表示する 　　　　　

Sample

マウスを動かしてください。円を描いて動かすとイイかも。。。

ソース

<HTML>
<HEAD>

<style type="text/css">
BODY {overflow: scroll; overflow-x: hidden;}
</style>

</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--
var remain_img = 16;
var path = "cursor.gif";

var isIE = false, isNav = false, range = "all.", style = ".style", i, d = 0;
var topPix = ".pixelTop", leftPix = ".pixelLeft", images, storage;
if (document.layers) {
  isNav = true, range = "layers.", style = "", topPix = ".top", leftPix = ".left";
} else if (document.all) {
  isIE = true;
}
function init_trail() {
  images = new Array();
  for (i = 0; i < parseInt(remain_img); i++) {
    images[i] = new Image();
    images[i].src = path;
  }
  storage = new Array(); 
  for (i = 0; i < images.length*3; i++) {
    storage[i] = 0;
  }
  for (i = 0; i < images.length; i++) {
    (isIE) ? document.write('<div id="obj' + i + 
'" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' +
 images[i].src + '"></div>') : document.write('<layer name="obj' + i + 
'" width="0" height="0" z-index="100"><img src="' + images[i].src + '"></layer>');
  }
  trail();
}
function trail() {
  for (i = 0; i < images.length; i++) {
    eval("document." + range + "obj" + i + style + topPix + "=" + storage[d]);
    eval("document." + range + "obj" + i + style + leftPix + "=" + storage[d+1]);
    d = d+2;
  }
  for (i = storage.length; i >= 2; i--) {;
    storage[i] = storage[i-2];
  }
  d = 0;
  clearTimeout(timer);
  var timer = setTimeout("trail()", 10);
}
function m_Event(e) { 
  if (isIE) {
    storage[0] = window.event.y+document.body.scrollTop+10;
    storage[1] = window.event.x+document.body.scrollLeft+10;
  } else {
    storage[0] = e.pageY+12;
    storage[1] = e.pageX+12;
  }
}
if (isNav) {
  document.captureEvents(Event.MOUSEMOVE);
}
if (isIE || isNav) {
  init_trail();
  document.onmousemove = m_Event;
}
//-->
</SCRIPT>

</BODY>
</HTML>

ワンポイント解説

var path = "cursor.gif";　で、表示する画像を設定しています。