- ベストアンサー
クリックすると小さい画像がキラキラする方法
今ホームページを作っています。 今日ハイヒールモモコさんのHPで見かけたんですが、 クリックすると細かいハートの画像が数十個程散らばるようになっていました。 そんな風にしたいのですが、どうやったらいいのでしょうか？ ちなみにモモコさんのＨＰアドレスは http://komomo.omosiro.com/index.html です。 分かる方がいらっしゃったらどうか教えてください。 出来ればソースを教えていただきたいのですが・・・ よろしくお願いします。
- mamahaha
- お礼率89% (690/772)
- JavaScript
- 回答数6
- ありがとう数8
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
mamahahaさん、慣れないと難しいと思うだけです。近くの誰かに実地で習うのが簡単ですね。１度、流用(?)のしかたさえ判れば、どんどん楽しめますよ。大変だと思うと、出来ないって思いますよね。(^^) まあ、親切な方も多いでしょうから、諦めずに質問を繰り返して下さいね。 ＞なんとか勉強しながらやってみます そうなんです。元々、日本よりも早く米国を発祥の地としてWWWインターネットが進化しましたからね。無料、無償の最先端は日本では無いことって残念ながらあったりします。英語のホームページも今では無料日本語へ変換するホームページも以下にありますので、ある程度は理解できるかも知れません。 http://www.excite.co.jp/world/url/ さて、今回のルーツが判りました。つまり作者ですね。Matt Gabbert (mgabbert@usrtoday.com)さんですね。(^^) そして配布元は、http://javascript.internet.com で、作者が命名したソフトのオリジナルは「 Mouse Fireworks (マウス花火)」でした。 http://javascript.internet.com/bgeffects/mouse-fireworks.html で紹介されています。ここでは「 parapara.js 」にインクルードファイルにしないで埋め込む形ですね。理解できれば、「 parapara.js 」を呼び出さないで利用できます。 で、日本語による利用の解説は、いちごに関する可愛いホームページ内の http://ichigo.fanclub.ne.jp/kitchen/parasetu.html が一番易しいと思います。(^^) このページでマウスの右クリックで保存を選択すれば「 parapara.js 」を入手できますね。こちらの画像は「いちご」なので可愛いですね。(^^) ---------- quincyさん、どうぞよろしくお願いします。何卒、不快に思わないで下さいね。間違ってたらお赦し願います。 ＞<SCRIPT language="JavaScript"></SCRIPT> ＞でいいかもしれません。 いえいえ、これでは何もしてくれません。 <SCRIPT language="JavaScript" src="parapara.js"></SCRIPT> によって、JavaScriptを定義したファイル「 parapara.js 」をインクルード呼び出ししないと、機能の本体が起動処理しません。開発者から伝わる内に誰かが善意でファイル化したのでしょうね。(^^) 著作権利は、Matt Gabbert氏にありますが、This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com とありますので、みんな使ってと言うたぐいでしょうね。金銭の請求はありませんので、いわゆるフリーソフトですね。失礼しました。これからもよろしくお願いいたします。
その他の回答 (5)
- lmeelm
- ベストアンサー率52% (18/34)
IE5.5以上限定ですが、、、全ソースです。 <HTML XMLNS:t="urn:schemas-microsoft-com:time"> <HEAD> <TITLE>スパーク</TITLE> <SCRIPT LANGUAGE="JavaScript"> function Cursor(){ d0.style.pixelLeft = event.x - 10 d0.style.pixelTop = event.y - 17} document.onmousemove = Cursor </SCRIPT> <STYLE> /*★★★ JavaScriptはもういらない!? ★★★★★★ ★ HTML+TIME by～～(m--)m ura@ad.il24.net ★ ★ URL http://ad.il24.net/~ura/ */ .time{behavior: url(#default#time2);} /*★★★★★★★★★★★★★★★★★★★★★★*/ #img1,#img2,#img3,#img4,#img5,#img6,#img7,#img8,#img9,#img10{ position:absolute;top:0;left:0;} </STYLE> <?IMPORT namespace="t" implementation="#default#time2"> </HEAD> <BODY id="b"> <DIV id="d0" class="time" begin="b.click" dur="1.5" timeaction="display" style="position:relative;top:155;z-index:-1;"> <IMG src="drug.gif" id="img1"><IMG src="drug.gif" id="img2"> <IMG src="drug.gif" id="img3"><IMG src="drug.gif" id="img4"> <IMG src="drug.gif" id="img5"><IMG src="drug.gif" id="img6"> <IMG src="drug.gif" id="img7"><IMG src="drug.gif" id="img8"> <IMG src="drug.gif" id="img9"><IMG src="drug.gif" id="img10"></DIV> <t:animateMotion targetElement="img1" begin="b.click" values="0,-55;-52,-116;-85,-154;-124,-205;-189,-217;-247,-169;-270,-120;-279,-44;-330,70" dur="1.3" /> <t:animateMotion targetElement="img2" begin="b.click" values="-10,-58;-20,-98;-32,-141;-38,-182;-53,-222;-72,-163;-81,-100;-100,-50;-150,80;" dur=".8" /> <t:animateMotion targetElement="img3" begin="b.click" values="10,-58;15,-98;30,-132;55,-165;76,-202;85,-250;-120,-130;-170,20;-180,-50;-200,10;-210,-50;" dur=".5" /> <t:animateMotion targetElement="img4" begin="b.click" values="-21,-86;-72,-116;-105,-154;-164,-205;-229,-198;-270,-120;-300,0;-335,-54;-356,-30;-370,-24;" dur="1" /> <t:animateMotion targetElement="img5" begin="b.click" values="-10,-68;-64,-135;-138,-154;-200,-183;-251,-289;-273,-248;-292,-180;-380,140;" dur="1.5" /> <t:animateMotion targetElement="img6" begin="b.click" values="51,-86;72,-116;105,-154;164,-205;209,-217;247,-169;270,-120;282,-8;283,40;285,0;358,100;" dur="1.2" /> <t:animateMotion targetElement="img7" begin="b.click" values="14,-113;-80,-157;-105,-215;-124,-237;-150,-250;-200,-150;-220,0;-300,400" dur=".5" /> <t:animateMotion targetElement="img8" begin="b.click" values="-13,-109;-27,-126;--54,-211;-77,-250;-107,-284;-160,-195;-171,-81;-176,19;-180,-68;-250,-10" dur=".8" /> <t:animateMotion targetElement="img9" begin="b.click" values="-20,-113;15,-183;-14,-210;-24,-250;35,-295;-31,-360;37,-470;20,-550;-10,-650;10,-750;" dur="2" /> <t:animateMotion targetElement="img10" begin="b.click" values="72,-116;133,-183;164,-205;189,-217;247,-169;279,-44;282,-8;320,-87;335,-30;370,-24;" dur="1" /> </BODY> </HTML>
お礼
こんばんは。 これもとてもかわいいですね。 さっそく張りつけてみます。 ありがとうございました。
- quincy
- ベストアンサー率46% (109/236)
Ujikiさん、ありがとうございます。 もちろんこれは私が考えたのではなくて、parapara.jsさんのものを流用したものです。 でも・・・これはこの方だけのオリジナルではなくて、一般的にあるものだと思います. 私が最初に見たのは海外のサイトのものでした。 ですから、書いておいてなんですが、勝手ながら書き込む必要はないように思われます. <SCRIPT language="JavaScript"></SCRIPT> でいいかもしれません。 でも、万が一のために書き込んでおきました. 大変失礼しました。 Ujikiさん、ご指摘ありがとうございます. これって・・・「世界中で最初に考えた」のではなくて、流用しているのに、「著作権」のようなものを主張できるんですかね？ 私もいろいろなjavascriptを使っていて「自分の名前やサイトを書き込んでいる」のをみて不思議に思っていました。と・・・ちょっとずれてしまいました.失礼しました.
お礼
こんばんは。 何故か私のパソコンはＤＬしても開けなかったんです。 <SCRIPT language="JavaScript"></SCRIPT>でやってみます。 ありがとうございました。
- Ujiki
- ベストアンサー率37% (38/101)
quincyさんへ、(^^); <SCRIPT language="JavaScript" src="parapara.js"></SCRIPT> の、「 parapara.js 」の中身を、mamahahaさんへ教えてあげて下さいね。よろしくお願いいたします。(^^) 以下のサイトは「 parapara.js 」を、yahoo検索で調べました。 http://ichigo.fanclub.ne.jp/kitchen/parasetu.html http://schihara.cool.ne.jp/Java/parapara.htm http://www7.ocn.ne.jp/~salt/ どこのサイトの「 parapara.js 」がオリジナルなのかわかりませんが、ブラウザーのURL指定場所で、parapara.jsと打ち込めばダウンロード(保存)はできますよね。それを自分のホームページに転送するのですが… 著作権に触れないか、ダウンロードしたparapara.jsの中身をエディターで確認してみて下さい。
お礼
張りつけしただけでは無理で、 parapara.jsをダウンロー-ドしなくちゃダメだったんですね（・・・でしょうか？） ダウンロードしてみたんですが、 何故か開けなかったので、今から検索して勉強してみます。 ありがとうございました。
- Ujiki
- ベストアンサー率37% (38/101)
>今ホームページを作っています。 はじめまして。(^^) 人間て、直ぐに飽きてしまって、目移りして、次の楽しいことを探してしまうものです。(って小生のことなのですが…) 回答は＃１の quincyさんで立派に成り立っており、小生は折角ホームページを作られている、そんな mamahahaに蛇足の独り言です。(どもです) (^^); 他のカーソルイベント(政)であれば以下の Java Script 無償配布ページでも様々な面白いものはあります。(^^) http://www.dynamicdrive.com/dynamicindex13/ 天使が飛び交う、文字が土星の輪のように回ったり… 確かにモモコさんのページのクリックするとキラキラが爆発(?)するのは、クリックするまで気が付かなくて可愛いですよね。(^^) ところで、画面全体のデザインである、ウェブテンプレートも無償で入手できますので是非 Web Template も、美しいものをGetされることをお勧めしておきます。テンプレート＋キラキラでどうでしょう。(^^) http://www.freewebtemplates.com/ や http://illdesign.yoll.net/templates.html で無料で入手できます。(中には有料で商売していますが) 勿論、中身(コンテンツ)は重要ですが…(^^); ページ全体の美しさも、先人の努力を利用させてもらって、楽々と中身に時間と労力をさきましょう。是非、頑張って下さい！
お礼
こんばんは。 海外のサイトでしたので、あんまりよく分からなかったのですが なんとか勉強しながらやってみます。 モモコさんのページのハートかわいいですよね。 私もかわいいページにしたいのですが、 初心者で、何がなんだかさっぱり。 ありがとうございました。
- quincy
- ベストアンサー率46% (109/236)
おはようございます。 おっしゃっているのは、クリックしたらパラパラとこぼれるjavascriptですね。 私も以前したことがあります。 以下のソースをはBODYタグ内に貼ってください。 また、BODYタグを、<BODY onload="initMouseEvents()"> としてください。マウスイベントをするよ！という意味です。 <SCRIPT language="JavaScript" src="parapara.js"></SCRIPT> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="10.gif" width="15" height="16"></DIV> </DIV> 1～10.gifは私が勝手につけたものなので、お好きな名前を付けてください。 サイズも正直・・・任意です。 そのままの大きさで出したかったら、widthもheightもいりません。 私が使っていたタグなので・・・サイズはアバウトです。 サイト作りがんばってください！！
お礼
こんばんは。 コピペして張りつける事しか出来ない初心者ですので大変助かります。 張りつけて試してみたんですけど上手く画像が表示されなくて。。。 勉強しながらやってみたいと思います。 ありがとうございました。
お礼
こんばんは。 なんとなく意味が分かってきました。 ＞<SCRIPT language="JavaScript"></SCRIPT> ＞でいいかもしれません。 いえいえ、これでは何もしてくれません。 確かに何もしてくれないかったです・・・（笑） <SCRIPT language="JavaScript" src="parapara.js"></SCRIPT> でやってみました。 重くはなったんですが、なんとか理想のＨＰに近づきました。 詳しい説明、とても参考になりました。 ありがとうございました。