「Mouse Fireworks」の設置方法

1 The JavaScript Sourceで、「Mouse Fireworks」のJavaScriptを、コピーして、ダウンロードしてきます。
(「BG Effects 」の中にあります。)
2 JavaScriptを、貼り付けたいページのタグを開き、<HEAD>に、下の部分をコピー&ペーストします。
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Original: Matt Gabbert (mgabbert@usrtoday.com) -->
<!-- Web Site: http://www.nolag.com -->

(長いので省略します)

anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287);
anim_9_y=new Array(-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273);
// End -->
</script>
</HEAD>
3 次に、<BODY>に、下の部分をコピー&ペーストします。
<BODY onload="initMouseEvents()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

(長いので省略します)

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 5.96 KB -->
</BODY>
4 後は、<BODY>に書き込んだ、下の部分の赤文字の部分を、青文字のように、書き換えます。
<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">.</font></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">.</font></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue">.</font></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">.</font></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="orange">.</font></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">.</font></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="green">.</font></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="skyblue">.</font></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">.</font></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">.</font></div>
</div>
                ↓
<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="img1/a_st1.gif" width="9" height="9"></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="img1/a_st2.gif" width="10" height="15"></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="img1/a_st3.gif" width="10" height="15"></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="img1/a_st1.gif" width="9" height="9"></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="img1/a_st2.gif" width="10" height="15"></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="img1/a_st3.gif" width="10" height="15"></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="img1/st1.gif" width="10" height="10"></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="img1/st2.gif" width="10" height="10"></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="img1/st3.gif" width="10" height="15"></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="img1/st5.gif" width="10" height="15"></div>
注) これは、フォルダ「img1」に、星のアイコンが入っている場合の設定です。

 使用する画像について
このJavaScriptに使用する画像は、なるべく軽いものがいいでしょう。
よろしかったら、「アンの小箱」の素材を、お使いください。
一括ダウンロード
一括ダウンロード
一括ダウンロード

Free JavaScripts provided
by
The JavaScript Source