「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に使用する画像は、なるべく軽いものがいいでしょう。
よろしかったら、「アンの小箱」の素材を、お使いください。 |
|
|