今ホームページを作っています。
今日ハイヒールモモコさんのHPで見かけたんですが、
クリックすると細かいハートの画像が数十個程散らばるようになっていました。
そんな風にしたいのですが、どうやったらいいのでしょうか?
ちなみにモモコさんのHPアドレスは
http://komomo.omosiro.com/index.html
です。
分かる方がいらっしゃったらどうか教えてください。
出来ればソースを教えていただきたいのですが・・・
よろしくお願いします。
No.5ベストアンサー
- 回答日時:
mamahahaさん、慣れないと難しいと思うだけです。
近くの誰かに実地で習うのが簡単ですね。1度、流用(?)のしかたさえ判れば、どんどん楽しめますよ。大変だと思うと、出来ないって思いますよね。(^^) まあ、親切な方も多いでしょうから、諦めずに質問を繰り返して下さいね。>なんとか勉強しながらやってみます
そうなんです。元々、日本よりも早く米国を発祥の地として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-f …
で紹介されています。ここでは「 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 とありますので、みんな使ってと言うたぐいでしょうね。金銭の請求はありませんので、いわゆるフリーソフトですね。失礼しました。これからもよろしくお願いいたします。
参考URL:http://ichigo.fanclub.ne.jp/kitchen/parasetu.html
こんばんは。
なんとなく意味が分かってきました。
><SCRIPT language="JavaScript"></SCRIPT>
>でいいかもしれません。
いえいえ、これでは何もしてくれません。
確かに何もしてくれないかったです・・・(笑)
<SCRIPT language="JavaScript" src="parapara.js"></SCRIPT>
でやってみました。
重くはなったんですが、なんとか理想のHPに近づきました。
詳しい説明、とても参考になりました。
ありがとうございました。
No.6
- 回答日時:
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>
参考URL:http://ad.il24.net/~ura/time/spark.htm
No.4
- 回答日時:
Ujikiさん、ありがとうございます。
もちろんこれは私が考えたのではなくて、parapara.jsさんのものを流用したものです。
でも・・・これはこの方だけのオリジナルではなくて、一般的にあるものだと思います.
私が最初に見たのは海外のサイトのものでした。
ですから、書いておいてなんですが、勝手ながら書き込む必要はないように思われます.
<SCRIPT language="JavaScript"></SCRIPT>
でいいかもしれません。
でも、万が一のために書き込んでおきました.
大変失礼しました。
Ujikiさん、ご指摘ありがとうございます.
これって・・・「世界中で最初に考えた」のではなくて、流用しているのに、「著作権」のようなものを主張できるんですかね?
私もいろいろなjavascriptを使っていて「自分の名前やサイトを書き込んでいる」のをみて不思議に思っていました。と・・・ちょっとずれてしまいました.失礼しました.
こんばんは。
何故か私のパソコンはDLしても開けなかったんです。
<SCRIPT language="JavaScript"></SCRIPT>でやってみます。
ありがとうございました。
No.3
- 回答日時:
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の中身をエディターで確認してみて下さい。
参考URL:http://google.yahoo.co.jp/bin/query?p=parapara.j …
張りつけしただけでは無理で、
parapara.jsをダウンロー-ドしなくちゃダメだったんですね(・・・でしょうか?)
ダウンロードしてみたんですが、
何故か開けなかったので、今から検索して勉強してみます。
ありがとうございました。
No.2
- 回答日時:
>今ホームページを作っています。
はじめまして。(^^)
人間て、直ぐに飽きてしまって、目移りして、次の楽しいことを探してしまうものです。(って小生のことなのですが…)
回答は#1の quincyさんで立派に成り立っており、小生は折角ホームページを作られている、そんな mamahahaに蛇足の独り言です。(どもです) (^^);
他のカーソルイベント(政)であれば以下の Java Script 無償配布ページでも様々な面白いものはあります。(^^)
http://www.dynamicdrive.com/dynamicindex13/
天使が飛び交う、文字が土星の輪のように回ったり…
確かにモモコさんのページのクリックするとキラキラが爆発(?)するのは、クリックするまで気が付かなくて可愛いですよね。(^^)
ところで、画面全体のデザインである、ウェブテンプレートも無償で入手できますので是非 Web Template も、美しいものをGetされることをお勧めしておきます。テンプレート+キラキラでどうでしょう。(^^)
http://www.freewebtemplates.com/
や
http://illdesign.yoll.net/templates.html
で無料で入手できます。(中には有料で商売していますが)
勿論、中身(コンテンツ)は重要ですが…(^^);
ページ全体の美しさも、先人の努力を利用させてもらって、楽々と中身に時間と労力をさきましょう。是非、頑張って下さい!
参考URL:http://www.freewebtemplates.com/
こんばんは。
海外のサイトでしたので、あんまりよく分からなかったのですが
なんとか勉強しながらやってみます。
モモコさんのページのハートかわいいですよね。
私もかわいいページにしたいのですが、
初心者で、何がなんだかさっぱり。
ありがとうございました。
No.1
- 回答日時:
おはようございます。
おっしゃっているのは、クリックしたらパラパラとこぼれる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もいりません。
私が使っていたタグなので・・・サイズはアバウトです。
サイト作りがんばってください!!
こんばんは。
コピペして張りつける事しか出来ない初心者ですので大変助かります。
張りつけて試してみたんですけど上手く画像が表示されなくて。。。
勉強しながらやってみたいと思います。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Chrome(クローム) 自作のホームページの画像でパソコンのChromeで見るとコナンの映像だけ写らなくて、マイクロソフトE 3 2022/06/09 18:00
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS VSコードでHTMLに(リンク)ファイル名をクリックしてもファイルが開かれない 1 2023/02/12 07:52
- Chrome(クローム) インターネットの各サイトの画像が表示されない 3 2022/12/04 22:43
- その他(IT・Webサービス) ロリポップのレンタルサーバーを借りてます。(一般的な安いプラン) 元々はホームページでも作ろうと思っ 1 2023/05/24 19:54
- Visual Basic(VBA) Edge操作のアプリが例外発生に 1 2023/03/12 21:22
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画面が真っ白になるのはどうして?
-
フォームに入力された値により...
-
c++std::string型をTCHARに変換...
-
イメージマップでのマウスオーバー
-
WSHでクリップボードにイメージ...
-
メニューをincludeして、階層が...
-
mouseoverとwindow.openを同時...
-
画像をオンクリックで複数表示...
-
CGI 16進数をバイナリ-に変換
-
どの<li><a> が押されたか判別...
-
マウスオーバーのメニューについて
-
クリックで背景変更するタグ
-
「jQuery」アコーディオンメニ...
-
jqueryのsortableで一部ソート...
-
画像の表示位置
-
jQueryで画像を重ねる
-
ツリー型の目次作成
-
JavaScript で flexslider の画...
-
[急ぎ] videoタグで埋め込んだm...
-
TABLEの高さを固定したいのですが…
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JSPでの画像ファイル表示
-
c++std::string型をTCHARに変換...
-
画面が真っ白になるのはどうして?
-
C言語のポインタ表現
-
クリックして変更した画像を他...
-
ランダムに画像を表示し、ポッ...
-
フォームに入力された値により...
-
日替わりで画像を変更したい
-
javascriptで複数の画像をラン...
-
htmlで、たくさんのgif画像を、...
-
「戻る」「進む」ボタンで画像...
-
Excel VBA マクロ 画像(...
-
JavaScriptのhistory.back(戻...
-
診断の作り方
-
小さい写真にマウス置くと拡大...
-
JavaScriptでボタンをクリック...
-
サムネイルをクリックして背景...
-
ロールオーバー効果にならない。
-
クリックした自身の画像を別画...
-
MinGWでfreetypeのmake時に
おすすめ情報