マウスの後を追いかけてくる画像を表示します。
Ver4ではポインタが移動した軌跡を、画像がじりじりと追っていきます。
また、表示されずマスコット画像は、複数の画像の中からランダムに表示されます。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
my_pic=new Array();
//マスコット画像で使いたい画像を指定する
my_pic[0]="0.gif";
my_pic[1]="1.gif";
my_pic[2]="2.gif";
my_pic[3]="3.gif";
x_ima=0; y_ima=0; x_iti=new Array(); y_iti=new Array();
my_time=0; doko=0; doko2=0;
ran=Math.floor(Math.random()*my_pic.length);
function basyo_han(e)
{
if(document.layers){x_iti[doko]=e.pageX; y_iti[doko]=e.pageY;}
else if((document.getElementById) && (!document.all))
{x_iti[doko]=e.pageX; y_iti[doko]=e.pageY;}
else if(document.all)
{x_iti[doko]=document.body.scrollLeft+event.clientX;
y_iti[doko]=document.body.scrollTop+event.clientY;}
if(doko == 0)doko++;
else if(doko > 0)
{
if(x_iti[doko] > x_iti[doko-1]+10 || y_iti[doko] > y_iti[doko-1]+10)doko++;
else if(x_iti[doko] < x_iti[doko-1]-10 || y_iti[doko] < y_iti[doko-1]-10)doko++;
}
}
function hyouji()
{
x_ima=x_iti[doko2];
y_ima=y_iti[doko2];
if(document.layers){
document.layers["lay0"].moveTo(x_ima,y_ima);
document.layers["lay0"].document.open();
document.layers["lay0"].document.write('<img src="'+my_pic[ran]+'" border="0">');
document.layers["lay0"].document.close();
document.layers["lay0"].visibility='show';
}
else if((document.getElementById) && (!document.all)){
document.getElementById("lay0").style.left=x_ima;
document.getElementById("lay0").style.top=y_ima;
document.images["pic1"].src=my_pic[ran];
document.getElementById("lay0").style.visibility='visible';
}
else if(document.all){
document.all("lay0").style.pixelLeft=x_ima;
document.all("lay0").style.pixelTop=y_ima;
document.all("lay0").document.images["pic1"].src=my_pic[ran];
document.all("lay0").style.visibility='visible';
}
doko2++;
clearTimeout(my_time); my_time=setTimeout('hyouji();',50);
return false;
}
if(document.layers)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=basyo_han;
//-->
</script>
</head>
<body onLoad="hyouji();">
<span id="lay0" style="position:absolute;visibility:hidden;">
<img src="" border="0" name="pic1">
</span>
・
・
・
</body></html>
[ 解説 ]
まず表示させたい画像を用意してください。
画像は何でも良いですが、あまり大きすぎるより小さめの方がいいです。
また、全ての画像サイズ（横幅、高さ）は統一してください。
次に上のソースを丸ごとコピーペーストして下さい。
そして、ソースの上から6〜9行目に、使用する画像ファイルのURLを指定します。
my_pic[0]="0.gif";
my_pic[1]="1.gif";
my_pic[2]="2.gif";
my_pic[3]="3.gif";
サンプルでは使用している画像は、4種類有ります。
ですから各行に全て異なる画像URLが指定されています。
もし使用する画像ファイルが4つ以下ならば、空いた行は削除して下さい。
例えば画像ファイルが3つしかないのであれば、1番下の
my_pic[3]="3.gif";
を削除して下さい。
もし使用する画像ファイルが5個以上ならば、さらに画像指定する行を増やします。
my_pic[3]="3.gif";
をコピーペーストし、URL部分は必要に応じて書き換えて下さい。
で、数字の「3」の部分を、1つ繰り上げて「4」にします。
同じ要領で幾らでも画像ファイルを増やせます。
ソースの下から7行目にイメージタグがあります。
ここに使用する画像の横幅、高さなどを指定してください。
これで終わりです。
また、もし画像が動く早さを変えたい場合は、ソースの上から10行目の「15」の数値を変えて下さい。
数値が大きければ大きいほど、早く移動します。
数値が小さければ小さいほど、遅く移動します。
|
