• ベストアンサー

背景画像を切り換えるボタンのようなものを探しています

背景画像を切り換えるボタンのようなものを探しています 自分で調べてはみたのですが見つかるのは時間や曜日ごとに切り換えるものでボタンやリンクを使った背景画像の切り替えがなかったので質問させてもらいました A.jpgとB.jpgを同じ階層に配置してC.htmlというページでボタンやリンクなどを使って訪問者が切り換えられるようにしたいです 分かりにくくて申し訳ありませんがよろしくお願いします

質問者が選んだベストアンサー

  • ベストアンサー
noname#141929
noname#141929
回答No.1

Javascriptが必要というところまでは分かっていますよね。 「onclick 背景」で検索すればいろいろ出ます。 そういう意味の切り替えじゃなかったらすみません。

skyblue3350
質問者

お礼

ありがとうございます 無事に変更するjavascriptが見つかりました どうやら探し方が悪かったようですね とても参考になりました 一応参考にしたサイト様を 「eweb　ホームページ作成支援サイト」 http://javascript.eweb-design.com/1302_bic.html

skyblue3350
質問者

補足

そこまでは一応分かったのですがその先の情報が少なくて困っています もう一度探してみますね

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • FLASHのボタンに関するアクションを教えてください！

    FLASHを使い始めたのですがどうしてもわからないところがあり困っています。大変お手数ですが教えて下さい！ 画面上にAというボタンをたくさん並べます。Aは見た目が同じなので、場所はランダムに並べています。これが10個あります。それぞれA-01、A-02という形で並んでいるとして、A-01の上にマウスをあわせるとB-01.jpgという画像が出てくるように設定したいのです。もちろんあわせるだけで、マウスをクリックするわけではありません。別のA-02のボタンをクリックするとB-02の画像がA-01のボタンを押したときに出た画像に変わって同じ場所に配置されるようにしたいのです。また、このボタンをクリックした場合はそれぞれ別のページへリンクもさせたいと思っています。 マウスを乗せると別の場所に画像が表示され、さらにクリックすると別のページにジャンプするといったボタンを作成することは可能でしょうか？大変お手数ですが教えていただければ幸いです。よろしくお願いいたします。

    • ベストアンサー
    • Flash
  • ＣＳＳ：liで作成したメニューの一つだけ背景画像を変えたい

    こんにちは。ページのメニューバーを<li>で作成していますが、 リンクがある<li>と、ない<li>で背景画像を変えたいのですが、<a:hover>の際の画像も別にしようと、背景画像を<a>で指定しまったため、どうしようかな、と行き詰りました。 ・【横並び】 ・【リンクあるなし別のボタン背景画像】 ・【hover時も背景画像チェンジ】 の３点をかなえるには、どのような記述がすっきりするでしょうか。ご意見。ご指摘・叱咤、お聞かせくださいませ。 ちなみに、作っておいて、へばった記述例が、以下です。 例）横並びのメニューボタン（メニュー１、２、３） ・メニュー１（閲覧しているページへのリンクボタンなので、リンクなし）→背景Ａ[../images/A.gif]、 ・メニュー２（他ページへのリンクボタン）→背景Ｂ[../images/B.gif]、hover時は背景Ｃ[../images/C.gif] ・メニュー３（メニュー２と同様） ----------------- ul#menu{ font-size: 12px; list-style-type:none; width:800; } ul#menu::after { visibility: hidden; clear: both; } ul#menu li{ float: left; width: 120px; list-style-type: none; display: inline; } ul#menu a{ color: #333; text-decoration: none; display: block; background-image: url(../images/B.gif); background-repeat: no-repeat; } ul#menu a:hover{ color: purple; text-decoration: underline; display: block; background-image: url(../images/C.gif); background-repeat: no-repeat; } -------------------

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

    今晩は。 いつもお世話になっています。 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
  • マウスオーバーでページ背景を変更

    似たような質問が無いか探したのですが、見つからずもし同様のものがありましたら申し訳ございません。 テキストリンクに対し、マウスオーバーで背景に画像を表示させたいです。 例）<a href="img.html">こんにちわ</a>⇒"こんにちわ"をマウスオーバーで背景に「img.jpg」というファイルをページ背景に表示させる。 よろしくお願いします。

  • テーブルの背景画像にリンクを設定したい

    ナビゲーションボタンを配置するのに、テーブルで、 tdの背景画像として同じ画像を設定しました。 メニューはテキストで記述しました。 そのテキスト部分ではなく、背景画像にリンクを 設定したいのですが、できますでしょうか。 テキストは左寄せで短いものもあるので、 テキストリンでは、ボタンの右の方をクリックしても リンクせず、使い勝手が悪いかと思いまして・・。 文字も込みの画像でボタンを作るとどうも鮮明でない ような気がしたので、このようなやり方にしようかな と考えたのですが、何かいいアドバイスありましたら よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSで背景画像の上にラジオボタンを配置したい

    画面のある一部分に背景画像があり（背景画像もCSSで配置したい）、 その背景画像の上にラジオボタンを配置したいのですが、これはCSSで実現できますか？ もし可能でしたら具体的なコード（ｈｔｍｌとCSS）を教えていただきたいです。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • ボタンクリックで画像を替えたい

    はじめまして。 ホームページを作成しているのですが、解決できない問題があり 皆様方のお知恵を拝借したく投稿させていただきました。 どうかお力添えをいただけますと幸いです。 具体的な内容としまして、 大きな画像（400px×125px）の下に横並びでボタン（80px×25px）を5つ配置しているのですが そのボタンをクリックすると大きな画像部分がクリックしたボタンに あわせて入れ替わって表示されるようにしたいのです。 ボタンA → 画像A ボタンB → 画像B ボタンC → 画像C ボタンD → 画像D ボタンE → 画像E という風に変化させていのですが 今ひとつ方法がわからずに苦しんでいます。。 これをFLASHをつかわず作成したいと考えています。 説明不足、言葉足らずなどあるかとは思いますが どなたかお力添えをいただけませんでしょうか。 よろしくお願いいたします。

  • 【Photoshop】 同じ作業を繰り返し連番で保存するまでを自動化したい。

    こんにちは。 a、b、c、の３枚の画像(jpg)を、決まった背景に配置して jpegで保存します。 これを何百枚も作成することになりました。 Photoshopのアクションで配置する所まではできたのですが、 Web用に保存を手作業で行っています。 これを更に自動化できないかと思っています。 決まったフォルダに、001.jpg、002.jpg・・・と 連番で自動保存することはできないでしょうか。 もっと言えば、 001a.jpg、001b.jpg、001c.jpg、002a.jpg、002b.jpg、002c.jpg、.... とあるフォルダを指定し、 ***a、***b、***c　をそれぞれの位置に配置した画像を、 一気に数百枚も作る事はできないでしょうか。 WinXP Photoshop7.0です。 上手く説明できなくてすみません。 よろしくお願いいたします。

  • リンクで画像を置き換えたい

    初心者ですが、よろしくお願いします。 たとえば 001.jpg 002.jpg 003.jpg という３つの画像ファイルがある場合に、 ---------------------------------- <html> <body> ～省略～ <a href = "#" onclick = "change_img(1)">画像1</a> <a href = "#" onclick = "change_img(2)">画像2</a> <a href = "#" onclick = "change_img(3)">画像3</a> <img src = "XXX.JPG> </body> </html> ---------------------------------- のような感じで画像１，２，３のリンクをクリックすることで、 ページ切り替えるのではなく、 XXX.JPGの部分のみ切り替えるscriptを考えているのですが、 ご教授願いないでしょうか？ 要望としては、切替候補の複数の画像は ページをロードしたときに最初に全て読み込んでおいて、 リンククリック時の画像の切替をスピーディにしたいと考えています。 サンプルの上記例にそくしたサンプルのコードなどを 回答いただけると助かります。 よろしくお願いいたします。

  • TABLEの背景画像をCSSに変更したい。

    今までTABLEを使って背景画像を指定していたのですが、CSSに変更したいと考えています。 現在はTABLEで図１のようにABC A'B'C' A''B''...と連続する背景画像を＜図３＞のカラム「ロ」に入れています。 これをCSSのbackgroud-imageで指定すると図２のB'ように途中で切れてしまいます。 これを背景イメージＡ，Ｂ，Ｃのいずれかの境界で背景を終わらせるようにコントロールすることはできないものでしょうか。 CSSだけで指定するのは困難なように思います。 JAVA Scriptとの併用になるのでしょうか。 CSSは基本的な使い方は理解しているつもりですが、JAVA Scriptは読める程度で書くことはできません。 わかりにくい説明で申し訳ありませんがどなたか教えていただければ助かります。 よろしくお願いします。 なお背景画像の高さはA＝B＝Cです。 背景画像は＜図３＞のカラム「ロ」、カラム「イ」「ロ」はコンテンツしだいで下に伸びます。 ＜図１：背景イメージ＞ ■■■　┐　 ■■■　A ■■■　┘ □□□　┐ □□□　B □□□　┘　 ◆◆◆　┐ ◆◆◆　C ◆◆◆　┘　 ＜図２：backgroud-imageによる指定＞ ■■■　┐　 ■■■　A ■■■　┘ □□□　┐ □□□　B □□□　┘　 ◆◆◆　┐ ◆◆◆　C ◆◆◆　┘　 ■■■　┐　 ■■■　A' ■■■　┘ □□□　┐ □□□　B' 　　　　┘　 ＜図３：現在のカラム（TABLEで指定）＞ ┌─────────┐ │┌─┐┌─┐┌─┐│ ││　││　││　││ ││イ││ロ││ハ││ ││　││　││　││ │└─┘└─┘└─┘│ └─────────┘

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する