- 締切済み
JAVASCRIPTで背景を切り替える方法
以下の２つのjsファイルをボタンで切り替えれるようにするにはどういうソースで可能でしょうか？ <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/heartdrop.js"></SCRIPT> <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/stardrop.js"></SCRIPT> ２つとも動く背景のjsファイルです。 bodyに置けば作動しますので、ボタンを押して２つを切り替えれるようにしたいのですがどうしても方法がわかりません。 どなたかご教授いただけないでしょうか？ よろしくお願いします。
- name_handluck
- お礼率80% (4/5)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
No.4です。 <body>に降らせる物と数を変更できるようなやつを作ってみました。 「FallObj.js」 https://gist.github.com/723150 ※ windowリサイズイベントには未対応です。 ※ DOM プロセッサが管理しているオブジェクトと、スクリプトエンジンが管理 しているオブジェクト、が混在してそうです。 連鎖を断ち切ってるので、メモリーリークしないと思うんですが、自身 ありません。 ※ Firefox、GoogleChrome、IE8（6,7）でOKかな。 サンプルHTML （とりあえず、文字（Star★、Hart▼）を降らせてますけど、画像でも 大丈夫のはずです。） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Falling Object</title> <style type="text/css"></style> <script type="text/javascript" src="FallObj.js"></script> </head> <body> <h1>Falling Object</h1> <button type="button" onclick="changeHart();">Hart</button> <button type="button" onclick="changeStar();">Star</button> <button type="button" onclick="stop();">stop</button> <p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p> <p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p> <p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p> <p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p><p>↓</p> <script type="text/javascript"> var Star = document.createElement("span"); Star.appendChild(document.createTextNode("★")); var Hart = document.createElement("span"); Hart.appendChild(document.createTextNode("▼")); //最初に星を10個降らせます var objs = setfalldownobj(Star,10); function changeHart(){ objs = changefalldownobj(objs,Hart,10) }; function changeStar(){ objs = changefalldownobj(objs,Star,10) }; function stop(){ stopfalldownobj(objs); }; </script> </body> </html>
- yyr446
- ベストアンサー率65% (870/1330)
切り替えボタンを押したら、 「画面いっぱいにハートが降ってきたり、雪が降ってきたりするのを切り替える」 を実装出来れば、元のjavascriptにこだわる必要はないのでしょうか？
お礼
回答ありがとうございます。そして返事遅くなり申し訳ありません。 知識不足のためいろいろと検証し、やっと皆さんの回答を理解するに至りました。 お一方ずつとも思ったのですが、なかなか切りが悪く、失礼とは思いながらもまとめて御礼をさせて頂くこととしました。 回答拝見させて頂きました。 はい、全くその通りです。 むしろ元のスクリプトにはこだわらない方法で行いたいというのが本音です。 目的はとにかく、画像もしくは文字を降らせる、もしくは上昇させる、というごく単純な動きです。ボタンを押すと画像(文字)が降ってきて、再度ボタンを押すとstopする。画像や文字の部分は変数にしておいて、押したボタンによって画像(文字)の部分を可変できるようにしたいと思っています。 自分で書くことが出来れば何ら問題ないのですがまだ未熟なためネットのものを解読しながら皆さんの回答を参考にさせていただき自分なりに検証しています。 まだまだ検証中(未完成)ですので、サンプルなどありましたら是非ともご教授頂ければ幸いです。 まだしばらくは空けさせていただくつもりですので是非ともよろしくお願いします。
- noris02
- ベストアンサー率74% (56/75)
私も見てみました。 そして質問主さんのなぜ切り替えが必要かの意図もちょっと理解。 (人様の暗号化を解くのは、気が引けますが あくまで 勉強で。汗) ｊｓ内は タグを作って 配列に15個分x,y座標を つくって、randomで挙動距離を動かし、 setTimeoutで動かしてます。 <div id=><img src= style=position ></div> setTimeout("・・・", 読み込む間隔); とまぁ おいといて、 ブラウザが表示された際に、すでに タグが書かれているのと同じ状態に なりますので、再読み込み(リロード)しなければ、かえれない仕様？なのかな。 私ならば js自体を書きかえるとおもいます。 ところで iframe で表示してみるというのはいかがでしょうか。 元のページはリロードせず、iframe内だけをリロードする。 また 無茶してみます。こうなりゃ やけです。 (IE8確認しました firefox3.6・Chrome7.0 表示できませんでした。) でも、iframeも 使えなくなっていくような気がする 【html】 <html><head> <!-- cssで、位置を指定--> <style type=text/css> .kiji{position:absolute;top:5px;left:5px;} .cssiframe{ border:none; width:100%; height:1000px; position:fixed;top:0;left:0; } .mask{position:absolute;top:0px;left:0px;width:100%;height:1000px;} </style> <script type=text/javascript> //intoiframe は body内の<iframe name="intoiframe" ・・・> で私が勝手に名づけたもの function button(num){ // 引数 num if(num==0){ intoiframe.location.href="draw.htm"; }else{ intoiframe.location.href="draw1.htm"; //iframeの中のurlを 変更しています } } </script> </head> <body> <iframe class="cssiframe" name="intoiframe" scrolling="no" border="0" frameborder="0"></iframe> <div class="mask"> </div> <div class="kiji"> 無理やりですね＾＾；<br> もはや 結果 こうなったという、本来の主旨からはずれてますが。<br> ＜div class="mask"＞＆nbsp;＜/div＞は、ブラウザ内で右クリックするとiframe内を<br> 選択してしまう為に、いれました。<br> <input type="button" onClick="button(0)" value="0"> <input type="button" onClick="button(1)" value="1"> </div> </body></html> 【draw.htm】 <html><body> <script type=text/javascript src=http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/stardrop.js></script> </body></html> 【draw1.htm】 <html><body> <script type=text/javascript src=http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/heartdrop.js></script> </body></html>
お礼
回答ありがとうございます。そして返事遅くなり申し訳ありません。 知識不足のためいろいろと検証し、やっと皆さんの回答を理解するに至りました。 お一方ずつとも思ったのですが、なかなか切りが悪く、失礼とは思いながらもまとめて御礼をさせて頂くこととしました。 回答拝見させて頂きました。 iframeと言う言葉すら知らない状況でしたのでネットで検索しながら何とか意味を理解するに至りました。同じことでもいろんなやり方があるんですね。 本来の目的は、画像もしくは文字を降らせる、もしくは上昇させる、というごく単純な動きを目指しています。 まだまだ検証中ですので何かありましたら書き込み頂ければ幸いです。
- fujillin
- ベストアンサー率61% (1594/2576)
＞ボタンで切り替えれるようにする というのが、どのような状況を想定しているのかわかりませんが、あるスクリプト（背景）が動作中にボタンを押すと別の背景に切り替わるといったイメージでしょうか？ ご提示のサイトのサンプルをざっと見た感じでは、どうもみな基本は同じロジックで、使用する画像と出現数と速度くらいを変えてるだけで、スクリプトは同じなのではないだろうかという気がします。 スクリプトを見てみると（1種類（hertdrop）しか見てませんが）、やはり最初の、 var no = 15; // snow number var speed = 10; // smaller number moves the snow faster var snowflake = "ｈttp://www9.ocn.ne.jp/~aki2nd/dhtml/sample/ha170.gif"; の部分にある変数程度で制御しているみたいですね。 それなので、ボタンを押したら動作中の画像をキャンセルする（又は画像アドレスを切り替える）などをして、制御変数を取り替えてあげるようにすれば、スクリプト本体はを使い分けなくてもすみそうな気がします。（ちゃんと見てないので未検証ですが、もしかすると乱数を発生させるときの係数やなんかも変えているのかな…） 少々気になったのが、それに続く、 var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; でブラウザの分岐を行っているようですが、（バージョン4のことらしいので）どうも少々古い分岐のように思えます。 試みに、手元のfx3、Opera10だとサンプル画面は動作しないみたいですが・・・ （あまり回答にはなっていなくてすみませんが。）
お礼
回答ありがとうございます。そして返事遅くなり申し訳ありません。 知識不足のためいろいろと検証し、やっと皆さんの回答を理解するに至りました。 お一方ずつとも思ったのですが、なかなか切りが悪く、失礼とは思いながらもまとめて御礼をさせて頂くこととしました。 回答拝見させて頂きました。少し古いんですね。まだまだ未熟で一つ一つに時間が掛かりますが、地道にやっていくつもりです。まだまだ検証中ですので何かありましたら書き込み頂ければ幸いです。
- noris02
- ベストアンサー率74% (56/75)
自身に ボタンで test.htm?bu=0 で飛ばしてみてはと おもったのですが。 で、buの値で jsを選択。 phpでいう、$_GET[〇〇]。 無理やりです。 もちろん、ページ全体が再度読み込まれます。 でも、この記述ができるなら jsファイルを 一つにまとめる方が いいとおもうのですが・・・ function heartdrop(){ 背景表示 } function stardrop(){ 背景表示 } <input type="button" onClick="heartdrop()"> で一つのjsファイルには ムリなのでしょうか。 主旨が違ったり更なる混乱になったらゴメンナサイ。 "javascriptでｊｓをgetで切り替える"という事だけ考えたサンプル (コード、考え方がまわりくどすぎです。背景描画のjsなかったので差し替えました) 【test.htm】 <head> <script type="text/javascript"> function button(num){ location.href="test.htm?bu="+num; } function getRequest(){ if(location.search.length > 1) { var get = new Object(); var ret = location.search.substr(1).split("&"); for(var i = 0; i < ret.length; i++) { var r = ret[i].split("="); get[r[0]] = r[1]; } return get; } else { return false; } } var get=getRequest(); if(get['bu']==0){ document.write("<script type='text/javascript' src='./draw.js'><\/script>"); }else{ document.write("<script type='text/javascript' src='./draw1.js'><\/script>"); } </script> </head> <body> <input type="button" onClick="button(0)" value="0"> <input type="button" onClick="button(1)" value="1"><br/> <span id="draw"></span><br/> <span id="draw1"></span> </body> 【draw.js】 window.onload=function(){ document.getElementById("draw").innerHTML="test"; } 【draw1.js】 window.onload=function(){ document.getElementById("draw1").innerHTML="test1"; } ↓javascriptの中で jsを読み込んでいる↓ document.write("<script type='text/javascript' src='./draw.js'><\/script>"); それを if で条件分岐。
お礼
回答ありがとうございます。そして御礼遅くなりすいません。 実はjavascriptを始めて一ヶ月程度のレベルです。ですので、以下のサイトのものを使用したいと思い今回質問しました。 http://www.awcs.org/dhtml/#drop すごく時間は掛かりますがfunctionにまとめることは出来ます。ただ、暗号化されていましたし、できればそのままサーバーに置いたものを使用できればと思い質問しました。 やはり思ったより面倒そうですね。 まだ内容を充分に理解できていませんが検証してみます。 もし何かありましたら書き込み頂けると嬉しいです。 わからないことがありましたら質問させていただきますのでよろしくお願いします。
関連するQ&A
- javascriptファイルは１つに統合できますか
javascript初心者のため、どなたかご教示いただけるとありがたいです。 html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。 ＜現状＞ <script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script> <script type="text/javascript" src="・・/js/jquery.cookie.js"></script> <script type="text/javascript" src="・・・/js/ui.core.js"></script> <script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script> <script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script> <script type="text/javascript" src="・・・/js/set_slider.js"></script> ・・・ jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか？ （単純に1箇所にコピー＆ペーストするようなイメージで） お手数ですが、ご教示のほど、宜しくお願い致します。
- ベストアンサー
- JavaScript
- Javascriptの外部サーバーからの読み込み(greybox)
いつも参考にさせていただいてます。 greyboxを使ってページを表示したいのですが、 使っているサーバーはjsファイルなどがアップロードできない、CMSサービスのサイトなので、 別のレンタルサーバーにアップロードしたjsファイルを読み込んで動かしたところうまくいきません。 模範例では、 ----------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "./greybox/"; // --></script> <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> </head> <body> <h1>GreyBox サンプル</h1> <a href="http://job.mycom.co.jp/" title="job" rel="gb_page[480,360]"> 毎日就職ナビのページ表示 </a> </body> </html> ----------------------------------- なのですが、パスを絶対パスに変えて ----------------------------------- <link rel="stylesheet" href="http://mydomain/greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "http://mydomain/greybox/"; // --></script> <script type="text/javascript" src="http://mydomain/greybox/AJS.js"></script> <script type="text/javascript" src="http://mydomain/greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/http://mydomain/gb_scripts.js"></script> ----------------------------------- と変更しました。 成功例(jsファイル同一サーバー上)：http://greybox.main.jp/test_ng/index2.html 失敗例(jsファイル別サーバー上)：http://greybox.main.jp/test_ok/index1.html 対応方法をお教え下さい。よろしくお願い致します。
- ベストアンサー
- JavaScript
- javascriptの中でjavascriptを呼びだしたいのです。
javascriptで質問です。 javascriptの中でjavascriptを呼びだしたいのです。 実際にやるとエラーになりますが、方法はありますでしょうか。 xが１のとき、script1.js xが２のとき、script2.js のように実行を分けたいので、このような処理を したいのですが。 何卒よろしくお願いいたします。 <script type="text/javascript"> <script type='text/javascript' src='http://www.domain.com/script1.js'></script>"; </script>
- ベストアンサー
- JavaScript
- 同じJavaScriptを共通にして、別ファイルにする方法は(ソース付き)？
よろしくお願いします。 ログの出力をするために、全てのページに同じJavaScriptを埋め込んでいます。 ただ、あまりにも行数が多くなる可能性があるので、この部分を１つのファイルにまとめたいと思っています。 具体的には、現状を変更後のようにしたいと思います。 そこで、Common.jsにはどのように記述をすれば良いでしょうか？ ●現状 </table> <SCRIPT Language="JavaScript"> <!-- document.write("width="+screen.width+"&"); document.write("height="+screen.height+"&"); document.write("color="+screen.colorDepth+"'>"); // --> </SCRIPT> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "********"; urchinTracker(); </script> </body> </html> ↓↓↓ ●変更後 </table> <SCRIPT SRC="../scripts/Common.js"></SCRIPT> </body> </html>
- 締切済み
- HTML
- [javascript] Dexagogoが動きません・・・。
こんにちわ。 このたび、下記URLにあるjavascriptを作動させようと悪戦苦闘しております・・・。 Really easy field validation * Dexagogo http://tetlaw.id.au/view/javascript/really-easy-field-validation 入力確認を行なうスクリプトで具体的には以下のURLのような動作を致します。 http://tetlaw.id.au/upload/dev/validation/ が、しかし全く動いてくれません・・・。 原因特定のため、無駄なタグをどんどん削っていきましたが、依然動作せず・・。 参考までにソースを添付致します。 <html><title>入力チェック</title> <head> <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous/src/effects.js" type="text/javascript"></script> <script type="text/javascript" src="fabtabulous.js"></script> <script type="text/javascript" src="validation.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form action="#" method="get" id="test"> <br> <label for="field1">Name</label>:<input name="field1" id="field1" class="required" title="Enter your name" /> <br> <input type="submit"> </form> </body> </html> ご存知の方、お助けいただけると幸いです。
- 締切済み
- JavaScript
- 【javascript】２つ同時に上手く動かない
javascript初心者です。 現在作成している画面に２つのjavascriptを動かしたいと思っております。 しかしながら、一つずつでは動くのですが、同時に表示すると上手く動作しません。 いい方法などありましたらご教授お願い致します。 【htmlのヘッド】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.coda-slider-2.0.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/sm_scroll.js"></script> <script type="text/javascript" src="js/jcaption.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('#coda-slider-1').codaSlider({ autoSlide:false, autoHeight:false, autoSlideStopWhenClicked:false, autoSlideInterval:10000, firstPanelToLoad:1, dynamicArrows: false, }); }); </script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> 【上部のjavascript】 Coda-Slider 参照URL：http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_slider/coda_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 【下部のjavascript】 litebox 参照URL：http://lokeshdhakar.com/projects/lightbox2/ javascript内が初期化されているのが問題なのでしょうか？ 解決の方法などありませんでしょうか？ 以上、宜しくお願い致します。
- ベストアンサー
- JavaScript
- マウスストーカーが有効になりません。
星がカーソルの後を追うように以下のページからソースをコピペして サイトに貼りつけましたが http://www.awcs.org/dhtml/sample/starmouse.html <SCRIPT type="text/javascript" src="http://www.awcs.org/dhtml/sample/starmouse.js"></SCRIPT> 以下のように左上に星がへばりついて動きません。 http://brandvalue.jp/test4.html starmouse.js をダウンロードして 外部ファイルで呼び込んでも同じ結果です。 改善策はないでしょうか？
- ベストアンサー
- JavaScript
- javascriptの保存と呼び出し
はじめまして。宜しくお願いいたします。 javascriptを「保存し、呼び出す」方法、手順を教えてください。 イメージとして、「スタイルシートからクラスを呼び出す」みたいな使い方をしたいのです。 今のところjavascriptを直接記入していますので、呼び出し型にしたいのです。 調べた範囲では、.jsでファイル内に保存し、src="XXXX.js"で呼び出せば、 ほぼ似たことができるとお聞きしました。 ただ、実験的にやってみたところ、今のところ失敗しています。 失敗までの状況は以下です。 --------------------------------------------------------------------------------- 現在、HTMLドキュメント(.htm)のBODYの中に、javascriptの直接記入箇所がある。 <script type="～～～………</script> このまま<script type="～～～………</script>をコピーし、 新規.htm（白紙）を開いてペースト。 新規.htmが、<script type="～～～………</script> だけの記述の.htmになった。 それを名前をつけて、.jsで保存。 ローカルファイルの中に.jsができた。 その後、本来の.htmに戻って、BODYに、 <script type="text/javascript" src="XXXX.js"></script> と入れてみる。 呼び出せるかと思ったが… 結果は、何も表示されず、失敗。 --------------------------------------------------------------------------------- と、こんな状況です。 何が間違っているのでしょうか。お詳しい方、お教えください。 お時間のある方はHTMLも含めお教えくださいますとなお嬉しいです。 宜しくお願いいたします。
- 締切済み
- HTML
- Jquery と JqueryUIについて
現在、Jquery と JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(１．４．４でもだめでした） JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の show メソッドのかわりに ｔoggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- JavaScriptがFirefoxで動かない・・・
よろしくお願いいたします。 IEでは正常に動作するのですが、Firefoxで実行してみると ボタンを押しても何の反応もありません。 どのように変更すればFirefoxで動作するのでしょうか？ よろしくお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- function warning(){ alert("テストです。"); } //--> </SCRIPT> <FORM><INPUT type="button" value="ボタンを押して。" onClick="warning()"></FORM> 上記のコードを外部に独立させて・・・ 【コード】 <script type="text/javascript" src="sample3.js"></script> <input type = "button" name = "button3" value = "sample3" onclick = "Func3();"> 【sample3.js】 function Func3() { alert("js外部ファイル記述"); } です。 FC2ブログで活用したいのですが・・・ 改行の扱いは「HTMLタグのみ」に設定しています。 ご回答、よろしくお願いいたします。
- 締切済み
- JavaScript
補足
失礼しました。NO,4さんですね。違う方と思っていました。大変失礼しました。 downloadボタンを押しましたが、これがFallObj.jsでしょうか？ ファイルの使い方がわかりませんでしたので https://gist.github.com/723150 よりソースをコピーしたものをメモ帳に貼り付け、FallObj.jsとして保存したものを <script type="text/javascript" src="http//●●FallObj.js"></script> (●●は自分のサーバーのURL) として使ってみたのですが、30行目(var objs = setfalldownobj(Star,10);)で「オブジェクトがありません」とエラーが出ます。 やり方が違うのでしょうか？ 手の込んだものを掲載頂いてるようなので、是非とも見てみたいのですが、手順に間違いがありますでしょうか？ ご指導お願い致します。 是非とも拝見したいです。