Java Scriptの参考書
マウスの動きに画像がついてくるスクリプトです。 ちょっとしたお遊びに使えます。 周囲８方向と中心の合わせて９方向に対応しており、結構な実用性があります。
HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、DIV要素に対してID属性iLxy（３×３）を指定します。 そのDIV要素には、下表のようにそれぞれの方向の画像ファイルを指定します。
| 左上(eye00.gif) | 上(eye10.gif) | 右上(eye20.gif) |
| 左(eye01.gif) | 中央(eye11.gif) | 右(eye21.gif) |
| 左下(eye02.gif) | 下(eye12.gif) | 右下(eye22.gif) |
各方向の画像ファイルを変更可能です。
IE4,NN4以上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>マウスストーカー</TITLE>
<STYLE TYPE="text/css">
<!--
.Style1{
position: absolute;
}
.Style2{
position: absolute;
left: 99%;
top: 99%;
}
-->
</STYLE>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;
var Lflag = false;
var LaymaxX = 2;
var LaymaxY = 2;
var MainLay;
var lay=new Array();
lay[0] = new Array();
lay[1] = new Array();
lay[2] = new Array();
var laySelect,bufSelect;
var X,Y;
var imXL,imXR,imYL,imYR;
var imW,imH;
var dX,dY;
var layX = 1;
var layY = 1;
var bufX = 1;
var bufY = 1;
if(iIE4){
document.onmousemove = Mmove;
}
if(iNN4){
window.onmousemove = Mmove;
window.captureEvents(Event.MOUSEMOVE);
}
function Init(){
if(iIE4){
with(MainLay = document.all.mainL){
for(i = 0; i <= LaymaxX; i++){
for(j = 0; j <= LaymaxY; j++){
lay[i][j] = document.all("iL"+i+j).style;
lay[i][j].visibility = "hidden";
}
}
imW = MainLay.document.all(0).document.images[0].width;
imH = MainLay.document.all(0).document.images[0].height;
}
}
if(iNN4){
with(MainLay = document.layers.mainL){
for(i = 0; i <= LaymaxX; i++){
for(j = 0; j <= LaymaxY; j++){
lay[i][j] = document.layers["iL"+i+j];
lay[i][j].visibility = "hide";
}
}
imW = lay[0][0].document.images[0].width;
imH = lay[0][0].document.images[0].height;
}
}
Lflag = true;
laySelect = lay[layX][layY];
bufSelect = lay[layX][layY];
}
function Mmove(e){
if(Lflag){
if(iIE4){
// X = event.clientX;
// Y = event.clientY;
X = event.offsetX;
Y = event.offsetY;
imXL = parseInt(MainLay.offsetLeft);
imYL = parseInt(MainLay.offsetTop);
}
if(iNN4){
X = e.pageX;
Y = e.pageY;
imXL = MainLay.left;
imYL = MainLay.top;
}
imXR = imXL + imW;
imYR = imYL + imH;
layMove();
}
}
function layMove(){
if(Lflag){
bufX = layX;
bufY = layY;
if(X <= imXL + imW*1/5){
layX = 0;
dX = X;
}else{
if(X >= imXL + imW*4/5){
layX = 2;
dX = X - imW;
}else{
layX = 1;
dX = X - imW/2;
}
}
if(Y <= imYL + imH*1/5){
layY = 0;
dY = Y;
}else{
if(Y >= imYL + imH*4/5){
layY = 2;
dY = Y - imH;
}else{
layY = 1;
dY = Y - imH/2;
}
}
if(iIE4){
bufSelect.visibility = "hidden";
laySelect.visibility = "visible";
MainLay.style.posLeft = dX;
MainLay.style.posTop = dY;
}
if(iNN4){
bufSelect.visibility = "hide";
laySelect.visibility = "show";
setTimeout('MainLay.moveTo(dX,dY)',1);
}
laySelect = lay[layX][layY];
bufSelect = lay[bufX][bufY];
}
}
// -->
</SCRIPT>
</HEAD>
<BODY onload="Init()">
<DIV ID="dummy" STYLE="position:absolute;visibility:hidden"></DIV>
<DIV CLASS="Style2" ID="mainL">
<DIV CLASS="Style1" ID="iL00"><IMG SRC="image/eye00.gif" WIDTH=30 HEIGHT=30></DIV>
<DIV CLASS="Style1" ID="iL01"><IMG SRC="image/eye01.gif" WIDTH=30 HEIGHT=30></DIV>
<DIV CLASS="Style1" ID="iL02"><IMG SRC="image/eye02.gif" WIDTH=30 HEIGHT=30></DIV>
<DIV CLASS="Style1" ID="iL10"><IMG SRC="image/eye10.gif" WIDTH=30 HEIGHT=30></DIV>
<DIV CLASS="Style1" ID="iL11"><IMG SRC="image/eye11.gif" WIDTH=30 HEIGHT=30></DIV>
<DIV CLASS="Style1" ID="iL12"><IMG SRC="image/eye12.gif" WIDTH=30 HEIGHT=30></DIV>
<DIV CLASS="Style1" ID="iL20"><IMG SRC="image/eye20.gif" WIDTH=30 HEIGHT=30></DIV>
<DIV CLASS="Style1" ID="iL21"><IMG SRC="image/eye21.gif" WIDTH=30 HEIGHT=30></DIV>
<DIV CLASS="Style1" ID="iL22"><IMG SRC="image/eye22.gif" WIDTH=30 HEIGHT=30></DIV>
</DIV>
</BODY>
</HTML>