Java-Script

　マウスと共に移動する文字の色を変える 　　　　　

Sample

マウスを動かしてください。（文字色が緑色になっているでしょ。）

ソース

<HTML>
<HEAD>

<style>.spanstyle {
COLOR: green; FONT-FAMILY: century; FONT-SIZE: 14pt; FONT-WEIGHT: bold; 
POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
var x, y;
var steps = 18;
var flag = 0;
var message = "ようこそ！　Java-Da!! です。　 ";
message = message.split("");
var x_pos = new Array();
for (i = 0; i <= message.length - 1; i++) {
  x_pos[i] = -50;
}
var y_pos = new Array();
for (i = 0; i <= message.length - 1; i++) {
  y_pos[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 dsp_strings() {
  if (flag == 1 && document.all) {
    for (i = message.length - 1; i >= 1; i--) {
      x_pos[i] = x_pos[i - 1] + steps;
      y_pos[i] = y_pos[i - 1];
    }
    x_pos[0] = x + steps;
    y_pos[0] = y;
    for (i = 0; i < message.length - 1; i++) {
      var thisspan = eval("span" + (i) + ".style");
      thisspan.posLeft = x_pos[i];
      thisspan.posTop = y_pos[i];
    }
  } else if (flag==1 && document.layers) {
    for (i = message.length - 1; i >= 1; i--) {
      x_pos[i] = x_pos[i - 1] + steps;
      y_pos[i] = y_pos[i - 1];
    }
    x_pos[0] = x + steps;
    y_pos[0] = y;
    for (i = 0; i < message.length - 1; i++) {
      var thisspan = eval("document.span" + i);
      thisspan.left = x_pos[i];
      thisspan.top = y_pos[i];
    }
  }
  var timer = setTimeout("dsp_strings()", 10);
}
//-->
</SCRIPT>

</HEAD>
<body bgcolor=white text="#000000" onload="dsp_strings()"
style="OVERFLOW-X: hidden; OVERFLOW-Y: scroll; WIDTH: 100%">

<SCRIPT LANGUAGE="JavaScript">
<!--
for (i = 0; i <= message.length-1; 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>

</BODY>
</HTML>

ワンポイント解説