- ベストアンサー
クリックすると小さい画像がキラキラする方法
今ホームページを作っています。 今日ハイヒールモモコさんの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もいりません。 私が使っていたタグなので・・・サイズはアバウトです。 サイト作りがんばってください！！
お礼
こんばんは。 コピペして張りつける事しか出来ない初心者ですので大変助かります。 張りつけて試してみたんですけど上手く画像が表示されなくて。。。 勉強しながらやってみたいと思います。 ありがとうございました。
関連するQ&A
- 画像クリックで他の画像を入れ替える方法
ホームページ制作超初心者です。サイト制作で、画像「A」をクリックすると、画像「B」が画像「C」に入れ替わる。というアクションを設定したいのですが、ソースはどのように書けばいいのでしょうか。ご助言お願いします。
- 締切済み
- ホームページ作成ソフト
- 画像をクリックすると下の画像も同時に切り替わるページを作りたい
ホームページでたまに見るのですが、ある画像をクリックすると下にその項目の説明をする画像などが出てくることがあります。現在ホームページ作成の練習中なのですがソースを見てもいまいちよくわかりません。詳しい方いらっしゃいましたらお教え願います。 ※以下のHPの中段くらいにある「office professional plus 2007をつかうと、こんな悩みも解決！」というところが今言っている項目です。 http://www.microsoft.com/japan/smallbiz/campaign/officecpn0908/default.mspx 使用しているソフトはドリームウィーバーCS4です。
- 締切済み
- CSS
- 画像をクリックすると下の画像も同時に切り替わるページを作りたい
ホームページでたまに見るのですが、ある画像をクリックすると下にその項目の説明をする画像などが出てくることがあります。現在ホームページ作成の練習中なのですがソースを見てもいまいちよくわかりません。詳しい方いらっしゃいましたらお教え願います。 ※以下のHPの中段くらいにある「office professional plus 2007をつかうと、こんな悩みも解決！」というところが今言っている項目です。 http://www.microsoft.com/japan/smallbiz/campaign/officecpn0908/default.mspx 使用しているソフトはドリームウィーバーCS4です。
- 締切済み
- ホームページ作成ソフト
- 画像をクリックすると動くようにするには？
(1)ホームページビルダーで、動画を作る事はできたのですが、 クリックしてから動くようにするにはどうしたらいいのでしょうか?? (2)画像を、クリックすると好きに動かすことができ、 決めた場所に動かすと何か起こる・・・みたいな仕掛けは ビルダーなどでできるでしょうか？ ＨＰはジオシティ、 画像はビルダーとフォトショップで作っています。
- ベストアンサー
- ホームページ作成ソフト
- 右クリック禁止のHPの画像を取り込みたいです。
右クリック禁止のHPの画像を取り込みたいです。 下記の韓国のオークションの画像を取り込みたいのですが出来ません。 http://www.gmarket.co.kr/index.asp http://www.auction.co.kr/ 右クリック禁止でも取り込めるスクウェザー（http://www.vector.co.jp/soft/winnt/net/se168825.html?site=n&srno=SR020706）を使いましたが取り込めませんでした。 ソースで画像のアドレスをいちいち確認するのには検索を使っても時間がかかります。 無料でも有料でもいいので簡単に出来るソフト等はないですか? お願いします＞＜；
- ベストアンサー
- フリーウェア・フリーソフト
- 小さい画像をクリックして大きい画像を別窓で表示させる方法
ＨＰ作成ソフト（ホームページＮｉｎｊａ＋Ｅコマース）を使ってＨＰを使っています。サーバーはＺＡＱです。アップロードはソフトのＦＴＰ転送機能を使っています。現在ＨＰで品物を売っています。それで商品ページ（画像や商品名・値段を記入しているページ）の画像をクリックすると別窓で大きな画像を表示できるようにしたいのですが多分ソフト自体にはそのような機能（ＨＰビルダーのサムネイル機能のようなもの）がついていないと思います。 マイドキュメントにある自分のＨＰファイル⇒表示⇒ソースでＨＴＭＬを開いて「小さな画像」（リンク）「大きな画像」という感じのタグを加えて上書き保存してもＨＰには反映されません。 それで、フリーソフトのffftpをダウンロードして転送してみたのですが それではアップロード自体が上手くいかないのでそのソフト自体を削除して 上の作成ソフトでもう一度ＨＰを作り直しました。 ネットや本などで調べても分からなかったのでこちらで質問させて頂きました。 ちなみに、ＨＰ作成ソフトで挿入している画像はMy Docummentの中にありますし 大きな画像も同じファイルに入っています。
- ベストアンサー
- その他（インターネット・Webサービス）
- 私も画像が表示されません。
私もアップロードした際に画像が表示されなくなります。 私の症状は １・もちろんバイナリでアップロード ２・画像のみなら表示される。つまりＩｎｄｅｘから画像をクリックして いくと表示される。 ３・タグもどこがまちがってるのかワカラナイ。ブラウザで確認すると ちゃんと表示されている。のに、いったん、アッップロードすると画像 が表示されなくなる。 まったくサッパリです。ちなみに私のホームページアドレスは http://XXXXXXXX.tripod.co.jp/ です。これはＩｎｄｅｘへいくアドレスです。トップページはU-mixagogo ,リンクはheppokoというやつです。 何とぞ御解決を・・・・
- ベストアンサー
- HTML
- １つのファイルで画像をクリックしたら差し代わる方法
表題のようにJavascriptで１つのhtmlファイルで複数の箇所に違う画像があり、それをクリックしたら別の画像に差し代わるということをしたいのですが、中々うまくいかずに困ってしまっています。 下記のようなソースになった場合にそれぞれ別の画像でクリックしたら違う画像に差し替えるには関数等の書き方はどのようにすれば宜しいのでしょうか。 どなたか教えてもらえますでしょうか？ Javascript初心者にて失礼しますm(_ _)m 下記に途中までやったソースがあるのですが、行き詰ってしまってます。。。。。 宜しくお願い致します。m(_ _)m m(_ _)m ・・・・・・・・・・・・・ JavaScriptは下記の通りです。 //１つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/index"; exp = "jpg"; cnt = 0; function changeImage() { cnt++; cnt %= num; document.index.src = nme + cnt + "." + exp; } </script> //２つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/img"; exp = "jpg"; cnt = 0; function changeImg() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } </script> htmlは下記の通りです。 <!--１つ目の画像です--> <a href="JavaScript:changeImage()"> <img src="image/index0.jpg" name="index" border="0"></a> <!--２つ目の画像です--> <a href="JavaScript:changeImg()"> <img src="image/img0.jpg" name="img" border="0"></a>
- ベストアンサー
- JavaScript
- 左右クリック禁止でクリックする方法
左右クリック禁止のwebページでクリックの操作をする方法が知りたいです。 具体的には、このサイトhttp://irumeknightpage.aikotoba.jp/index.html のレベル１４からレベル１５への進み方が知りたいです。 ソースを見てアドレスとそのリンクの場所もわかるのですが、そのアドレスを直に入力する以外の方法がわかりません。 サイトの趣旨としてはなるべくソースは見ないようにとのことで、ヒントに「ここと書いてあるんだからクリックしてあげましょう。左禁で。」と書いてあるので何かソースを見る以外の方法があると思うのですが、tabキーを押してたりしてもだめでした。 サイトの趣旨に反すると思うので、あえてレベル１４のアドレスは書きませんが、ソースを見る以外の方法でレベル１５に行く方法（左右クリック禁止でクリックする方法）を教えていただきたいです。 面倒かけますが、よろしくお願いいたします。 （質問に関係ない内容のみを回答とするのは勘弁してください)
- ベストアンサー
- その他（インターネット・Webサービス）
- クリックで画像が入れ替わるソースの書き方
例えば、「1.jpg」という画像をクリックすると、「2.jpg」という画像が「3.jpg」という画像に切り替わるという設定にしたいのですが、そのアクションを実行させるソースの書き方を教えて下さい。若しくはそのようなアクションが設定されているサイトをご紹介下さい。よろしくお願いします。※使用ソフト：「ホームページビルダーver6」です。
- ベストアンサー
- ホームページ作成ソフト
お礼
こんばんは。 なんとなく意味が分かってきました。 ＞<SCRIPT language="JavaScript"></SCRIPT> ＞でいいかもしれません。 いえいえ、これでは何もしてくれません。 確かに何もしてくれないかったです・・・（笑） <SCRIPT language="JavaScript" src="parapara.js"></SCRIPT> でやってみました。 重くはなったんですが、なんとか理想のＨＰに近づきました。 詳しい説明、とても参考になりました。 ありがとうございました。