• 締切済み

アルバム

JavaScriptでNextボタン　Backボタンを押したときbackgroundのイメージを変えたいのですが、参考になるソースまたはサイトを教えていただけませんでしょうか？背景イメージが変わるのが理想です。

  • amd64
  • お礼率0% (0/42)

みんなの回答

noname#84373
noname#84373
回答No.2

補足 画像のファイル名は、例として IMG_0001.JPG からの連番になります

noname#84373
noname#84373
回答No.1

<html> <body> <input type="button" value="back" onClicl="bg(-1)"> <input type="button" value="next" onClick="bg(1)"> <script> var imghd ='./img/'+'IMG_';//画像のディレクトリと画像のファイル名の頭の部分 var imgno =1;//最初の番号 var imgft ='.JPG';//画像の拡張子 var imgno_max=3;//画像の枚数 //画像は連番でなければならない、画像は適当な大きさにすること window.onload=function(){bg(0)}; function $0NUM( num, p ){ var s = '0000000000'+ num; return s.substr( s.length-p,p); }// 1-> 0001 のように返す function bg(n){ imgno-=-n; if(imgno<1) imgno=imgno_max; if(imgno>imgno_max) imgno=1; document.body.style.backgroundImage='url('+imghd+$0NUM(imgno,4)+imgft+')'; } </script> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • InternetExplorerやNetScapeのオプション操作について

    　ホームページを作成する際に背景イメージ(background)やＣＳＳ記述の背景イメージ(background-image)を使用した場合、それらはInternetExplorerやNetScape等のブラウザの初期設定ではオプション設定で印刷されないよう設定されているのですが、この設定をJavascriptやPHPによって変更する事は可能なのでしょうか？ 　又、可能であるのでしたらその手法のご教授を願いします。

  • 背景画像上にテキストを配置したボタンについて

    今晩は。 いつもお世話になっています。 CSSで次のようなボタンを作りたいと思っています。 ・背景画像の上にテキストを乗せたボタン。 1)ボタン上のテキストを書き換えられるようにしたい。 2)ボタンはページによって同じ背景画像でサイズを変えたい。（指定した縦横幅に合わせて背景画像がリサイズされるようにしたい） 3)背景画像ごとリンクにしたい。 参考サイトを見て、現在以下のようなボタンを作ってみました。 1、2はクリアできたのですが、ボタン上のテキストではなく、背景画像自体をリンクにするにはどうすればいいでしょうか？ また、色々方法はあると思うのですが、今回のようなボタンを作る上でもっと効率の良いCSSがあれば、参考サイト等教えて頂けると幸いです。 -------------CSS-------------- div.photo{ width:100px; height:50px; background-image:url("xxxx.png"); background-repeat:no-repeat; position:relative; background-size:contain; float:right; } .text{ width:100px; position:absolute; top:8px;left:10px; color:#ffffff; line-height: 1.2; font-size:15px; } ------------HTML------------- <div class="photo"> <div class="text"><a href="#">テキスト</a></div> </div> 以上になります。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • ラジオボタンが選択されたらテキストフィールドを入力可能にする方法

    社会人2年目のSEです。 JavaScriptが書けなくて困っています。 実装内容は以下の通りです。 【実装内容】 ・ラジオボタンが3つ。 ・そのうち2つはただのラジオボタン。 ・もう1つは、そのラジオボタンを押したらテキストボックスに値を入力可能にするもの。 【画面イメージ】 ○ ＡＡＡ ○ ＢＢＢ ● ＣＣＣ　[テキストボックス] ↑ラジオボタン（CCCのラジオボタンがチェックされてる時のみ、テキストボックス入力可能） 以下のサイトのソースを参考に実装可能かと思っています。 違うのはサンプルソースのテキストボックスを2つ削ればいいだけなので。 http://www.openspc2.org/reibun/javascript/form_radio/006/index.html このソースを参考にして作ってみたのですが、技術力が足りないため、動かすことができませんでした。 アドバイスよろしくお願い致します。

  • CSSによる背景画像のセンタリング。IE以外ではうまくいかない

    背景画像をセンタリングしたいのですが、以下のCSSソースでは、IE以外（firefoxなど）は左右しかセンタリングされません。 body{margin:0; padding:0; text-align:center; background-repeat: no-repeat; background-position: center center; background-image:url(../images/back5.jpg)} CSSハックを使って、個々のCSSを書くしかないんでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 背景に複数の画像を入れることは可能でしょうか

    HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか？ もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; }

    • ベストアンサー
    • HTML
  • 画像切り替え

    javascript初心者です。 あるサイト→http://himajin.moo.jp/freejava/imgchange/imgview.htmlをカスタマイズしようと思っているんですが、スライドショーという形の、ループとか時間がきたら画像が変わるってのじゃなくて、サムネイル表示を活かしたまま、右ボタンでnext、左ボタンでbackみたいなサクサク動くようにしたいんですが、どういじっていいのか分かりません。 わかる方教えて下さい！よろしくお願いします。

  • サイト内のページに飛ぶときの背景に関する異常

    （以下、一部分だけ取り出した記述です。） body{ background-color:#ffffff; background-image:url(bg.jpg); } #page{ width:960px; background-color:#ffffff; } ======================================== 【質問】 オフライン上ですが、以下のような症状が出ます。 考えられること、原因になりうる要素に思いあたることがあったら何でもいいので 教えてください。 【状態】 サイト内の他のページにリンクで切り替わるとき、あるいはTOPページに戻るとき、ブラウザの更新ボタンを押したとき、正確にはクリックしたマウスのボタンをはなした瞬間）など、ページを読み込むときに一瞬（まばたきのタイミング）ですが背景色の白（#ffffff）がチカッと表示され、その後画像が表示されるという状況です。 background-colorを白ではなく、緑に設定するとマウスを離した瞬間緑色が表示され、すぐに背景画像（ここではbg.jpg）が表示されます。 背景画像と同じ系列の色で背景色を指定してもやはり、一度background-colorが実施されたあとに背景画像が表示されている（ような感じ）のが目視できます。 【試してみたこと】 ●background-colorとbackground-imageの記述順を変えてみた。 ●background-colorの記述を取り、background-imageだけにしてみた。 ●background-repeatを記述したり、消してみたりした。 ●背景画像をjpgではなくgifのもので試してみた。 ●背景画像のサイズを（たとえば）200X140とか1200×800などと変えてみた。 【マシン、作成環境】 Windows7（64ビット）、メモリ8Gのノートマシン。 ホームページ作成ソフトはいっさい使用していない（メモ帳のみで手打ち）。

    • ベストアンサー
    • CSS
  • ページと背景画像との境界線の影の付け方

    同じような質問なのですが少し違うのでご質問させていただきました。 ページと背景画像との境界線に影をつけたいのですが 背景の画像はどんなモニターのサイズでも画像の中心やデザインを変えたくなかったので http://webdesignrecipes.com/full-page-background-image-sample-01.html こちらのサイトを参考にcssで背景画像を配置しています。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • css（スタイルシート）について

    最近スタイルシートを勉強しているものです。 外部スタイルシートにて body { margin: 0; padding: 0; background-image:url(img/back.jpg); background-repeat:repeat-y; background-position: center; background-color:#333333; } という記述で、背景の設定をしました。 プレビューイメージは背景＝黒　中央＝白といったイメージです。 中央＝白の位置にテキスト文字を入れたいのですが、マージンもしくはパディング設定をしてしまうと ウィンドウのサイズによって背景と文字がずれてしまいます。 テキストの文章もcssで設定したい場合 どのように設定するのがよろしいでしょうか？ よろしくお願いします。

    • 締切済み
    • CSS
  • fc2blogでshadowboxを使用したいと思い

    fc2blogでshadowboxを使用したいと思い http://pakun13.blog44.fc2.com/blog-entry-365.html のブログの記事を参考にして、自分のブログに導入しようと考え、記事に書いてあるように、CSSを書き換えて、必要な画像、JSなどをアップロードをし、テンプレートの編集でHTML編集を書き換えて、使用しようとしたのですが、動画がポップアップ表示されませんでした。 参考サイトを順に追っていきますと 最初に参考サイト 1～3に書いてあるように jQueryとShadowbox jsをダウンロードして解凍しました。 次に、参考サイト 4～5 に書いてあるように、LICENSE、README、shadowbox css　以外ををfc2にアップロードして、shadowbox cssをメモ帳で開きに下記の6点を書き換えました。 ○○○○にはアップロード先のURLが入ります。 {background:url(http://○○○○/loading.gif) no-repeat;padding-left:34px;display:inline-block;} {background-image:url(http://○○○○/close.png);} {background-image:url(http://○○○○/next.png);} {background-image:url(http://○○○○/previous.png);} {background-image:url(http://○○○○/play.png);} {background-image:url(http://○○○○/pause.png);} 書き換えたshadowbox cssをfc2にアップロードして、テンプレートの編集で〈/body〉の上に <script type="text/javascript" src="http://○○○○/jquery-1-4-2-min.js"></script> <link rel="stylesheet" type="text/css" href="http://○○○○/shadowbox.css"> <script type="text/javascript" src="http://○○○○/shadowbox.js"> <script type="text/javascript">Shadowbox.init({language: 'ja',players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']}); </script> を貼り付けて更新ボタンを押して、新しく記事を書くで <a rel="shadowbox;width=動画の幅;height=動画の高さ" title="動画のタイトル" href="動画のＵＲＬ"><img src="サムネイル画像のＵＲＬ" width=サムネイルの大きさ border=0 </a> を使用してみましたが、ポップアップされずに、youtubeに飛ばされるだけでした。 知識がないので、参考ブログを参考にして自分なりにやってみましたが、shadowboxを使用する事が出来ませんでした。説明が分かり難いかもしれませんが、時間がありましたら、アドバイスして頂けると有り難いです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する