マウスポインターを追いかける画像

マウスポインターを追いかける画像

ごらんのように、マウスポインターを画像が追っかけています。
ホームページ改造王さんが作ったＪava　Sｃｒｉｐｔを解説しています。
H15.12月の現在ではサイトを閉鎖されたようです。非常に残念なことです。
これはその内容をIBMホームページビルダー用に解説したものです。

これが、設定方法だ。

まずは普通に新規作成と行きましょう

ＨＴＭＬｿｰｽを選びます。
するとソースの中身を見ることができます。

Ｓｃｒｉｐｔを挿入する箇所は
ラインで引いた部分の
<BODY>この間に入れる</BODY>

ホームページ改造王さんの作った
Ｓｃｒｉｐｔを挿入してみましょう
下記のｿｰｽをコピーして貼り付けましょう。

<div id="dot0" style="position: absolute; visibility: hidden; height:10; width: 10;"><img src="bullet.gif" height=10 width=10></div>
<div id="dot1" style="position: absolute; height: 11; width: 11;"><IMG src="sankaku.gif" height="10" width="10"></div>
<div id="dot2" style="position: absolute; height: 11; width: 11;"><IMG src="sankaku.gif" height="10" width="10"></div>
<div id="dot3" style="position: absolute; height: 11; width: 11;"><IMG src="sankaku.gif" height="10" width="10"></div>
<div id="dot4" style="position: absolute; height: 11; width: 11;"><IMG src="sankaku.gif" height="10" width="10"></div>
<div id="dot5" style="position: absolute; height: 11; width: 11;"><IMG src="sankaku.gif" height="10" width="10"></div>
<script LANGUAGE="JavaScript">
<!--//
var nDots = 6;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;

var dots = new Array();
init();

プレビューで見ると
なにか、四角いものがマウスポインターを
追っかけてきますよね。
これはまだ画像をフォルダーにいれていないからです。

この画像を右クリックして

名前を付けて保存を選びます。
そして、作成中のＨＴＭＬと同じフォルダーに保存します。
画像の名前はそのままにしておいてね。
すると
左のように今度は三角印が追いかけるはずです。

さて、少しＨＴＭＬソースをみて調整してみましょう。
調整するのは、ほとんどこの前半部分だけでいいでしょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Homepage Builder V6.0.1 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</HEAD>
<BODY><div id="dot0" style="position: absolute; visibility: hidden; height:10; width: 10;"><img src="bullet.gif" height=10 width=10></div>
<div id="dot1" style="position: absolute; height: 11; width: 11;"><IMGsrc="sankaku.gif" height="10" width="10"></div>
<div id="dot2" style="position: absolute; height: 11; width: 11;"><IMG src="sankaku.gif" height="10" width="10"></div>
<div id="dot3" style="position: absolute; height: 11; width: 11;"><IMG src="sankaku.gif" height="10" width="10"></div>
<div id="dot4" style="position: absolute; height: 11; width: 11;"><IMG src="sankaku.gif" height="10" width="10"></div>
<div id="dot5" style="position: absolute; height: 11; width: 11;"><IMG src="sankaku.gif"height="10" width="10"></div>
####sankaku.gifはマウスポインターを追っかける画像の名前です。変更する場合は5個全部名前を変更します。####
別に５個の名前をすべて別々に変えても問題ありません。
####sankaku.gifの後ろ部分のheight（高さ）やwidth（幅）の値をかえると画像の大きさが変わります。####
####画像の個数を増やす場合はdot６；dot７と行を増やします。注）逆に減らす場合は削除してください。####

<script LANGUAGE="JavaScript">
<!--//
var nDots = 6;
####この部分は三角印の画像の個数を表しています。マウスポインターを追いかける画像は６個有り、####
####一個目は見えない設定になっているようです####
####この個数は上記id=dot5までなので６になりますがid=dot9まで増えていればその数ﾌﾟﾗｽ１する必要があるようです。####逆に減らす場合は、その分減らしてください。

戻る