• ベストアンサー
  • 困ってます

ボタンクリックでボタン画像を変えて、更に横に画像を

最近ブログを始めて、html、cssを勉強しているのですが、分からないことがあるので質問させて頂きます。 私が作りたいのはボタン画像を縦にいくつか並べて、クリックするとその横に画像が表示され、ボタンも押した状態(画像が変わっている)になっているというものです。 また、cssとhtmlでないのでしたらサイトへのアップや記載方法なども教えていただきたいです。 もしお分かりの方がいましたら、よろしくお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数4
  • 閲覧数776
  • ありがとう数2

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

  • ベストアンサー
  • 回答No.4
  • taloo
  • ベストアンサー率44% (1016/2281)

>No.3 なるほど。。。 読み返してみると、質問の主旨は2つあるというようにも読めますね。 >私が作りたいのはボタン画像を縦にいくつか並べて、 縦に並べるのはどうすればいいか? >クリックするとその横に画像が表示され、ボタンも押した状態(画像が変わっている)になっているというものです。 クリックすると画像をかえるにはどうすればいいか? 私は後者が主旨だと思って答えました。 「クリックしたらほかの場所にある画像も変わる」=ページをかえれば良いという考え方は、 縦に並べるとか横に並べるとかのレイアウト(デザイン)だけでなく、 サイドバーのボタンを押すと、本文中やヘッダにある画像が変わるというようなデザインにも応用は利きます。 前者の質問であるなら、 表(ひょう)と思われたのなら<table>を使えばいいと思いますし、段落(一般文章の中の画像)なら<p>と<br>、箇条書きなら<ul>を使えばいいと思います。 私なら<table>を使います。ご参考まで。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

私のしたかったことは、ブログのヘッダー部分にそのような表記ができないかと思って、 cssやJavaScript、FLASHなどで探していたのですが、表示幅を変えたり、ボタン画像を 変えるなどをどう書いたらいいか分からず、行き詰っていました。 無知なこともありますが、まだまだいろんな事が勉強不足ですね^^; 分かりづらい質問に答えていただきありがとうございました。

関連するQ&A

  • ボタンをクリック後、画像を表示させるには?

    FlashMXをでページを作っています。 あるページにいくつかボタンがあるとします。 一つのボタンをクリックすると、同一ページ内の決まった位置に画像が出てきます。 しかも次のボタンを押すまでは、その画像は表示されたままなんです。 こんなボタンを作りたいんですが、どうしたらいいのか分かりません。 ボタンと、表示させるイメージは準備してあります。 この二つをどう組み合わせればよいのでしょうか? お願いします。

    • ベストアンサー
    • Flash
  • 画像をクリックすると

    ランキングサイトに飛ばしたい。 お世話になります。FC2にてブログをやっていますが、 画像(自分の写真等)をクリックさせるとランキングに飛ぶ やり方をお教え下さい。 画像アップでサムネイルで表示させるのはわかるのですが、、、 宜しくお願いします。

  • ボタン(画像)をクリックするたび表を切り替える方法

    HTMLとcssで組み立てたサイトのページ内に設置したいものです。 タイトルボタン(画像 W300px)の下に表A(簡単な<table>内にテキストがあるW300 H400くらいのもの)があって、 タイトルボタンをクリックするたびに表B、表Cに切り替わるようにしたいのですが、 JavaScriptか何かで可能でしょうか。 表の大きさはすべて同じです。 画像切り替えはできたのですが、どうしてもテキストありの表を切り替え表示したく、 悩んでおります。 宜しくお願い致します。

    • ベストアンサー
    • HTML

その他の回答 (3)

  • 回答No.3

すみません。No.2です。 >最近ブログを始めて、html、cssを勉強しているのですが、 説明をはしょりすぎて、意図が伝わらないかと・・  この様に書かれたHTMLがありますが、それを「ボタン画像を縦にいくつか並べて、クリックするとその横に画像が表示され、ボタンも押した状態(画像が変わっている)になっている」様にプレゼンテーションしたいのですが」  という質問でしたら、CSSを説明できるということです。  元になるHTMLは、著者であるあなた以外には書けないのです。  なぜなら、その文書内で画像と文字列がどのような意味で構成され、さらにそれが文書全体におけるどのような構成要素であるかは、あなたにしかわからないからです。  それをマークアップするのがHTMLの目的ですから・・  No.2の回答で示したいくつかのHTMLを参考に、あるいはもっと意味が違うのか、まずHTMLを示してください。  No.1さんの回答も、そのような意味ですね。たぶん。

共感・感謝の気持ちを伝えよう!

  • 回答No.2

基本的な考え方を見直しましょう。出発点が間違っています。 まず、HTMLは文書構造にしたがって、マークアップしましょう。ここでデザインは考えません。  デザインを考えるにしても、それは次のように考えます。 ・この様にデザインするということは、文章の構造はこうでなければならない ★私も昔はそうでしたからですが、初心者はHTMLをワープロやDTP ( http://ja.wikipedia.org/wiki/DTP )のように、印刷・表示イメージを表すためのものと考えてしまう。これは間違いです。HTMLはあくまで、その文書がどのような要素で出来ているかをマークアップするためのものです。  そしてキチンのマークアップできていれば、どのようにもデザインできます。 ご希望のボタンをクリックして、画像を変えることはHTML+CSSでは、javascriptを使わない限り、一ページごとにHTMLを書く必要がありますが、ボタンにポイントを乗せることで画像を変えることは、HTML+CSSでしごく簡単に出来ます。  そのときに、そのページの文書構造にしたがって 例) <div class="section album"><!-- アルバムと説明 -->  <dl>   <dt>全景</dt>   <dd><img>説明</dd>   <dd></dd>   <dt>湖畔</dt>   <dd><img></dd>   <dt>水際</dt>   <dd><img></dd>  </dl> </div> とか、 <div class="album"><!-- 写真リスト -->  <ol>   <li>全景    <p><img></p>   </li>   <li>湖畔    <p><img></p>   </li>   <li>水際    <p><img></p>   </li>  </ol> </div> あるいは・・ <div class="nav"><!-- 詳細説明ないし写真へのナビゲーション -->  <ol>   <li><a href="[URL]">全景<img></li>   <li><a href="[URL"]>湖畔<img></li>   <li><a href="[URL">水際<img></li>  </ol> </div> でも、まったく同じようにデザインできます。    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  これは、 ★デザインはHTMLさえきちんと書けていれば、どのようにもデザインできるということです。 HTMLを書くときにもっとも大事なことは、文書全体において、この部分がどのような構成要素であるかを正しくマークアップするかと言うことです。  

共感・感謝の気持ちを伝えよう!

  • 回答No.1
  • taloo
  • ベストアンサー率44% (1016/2281)

1つめの状態になっているページを作り、たとえばpage1.htmlという名前で保存する。 同様に2つめの状態になっているページ、3つめの状態になっているページを作り、それぞれpage2.html、page3.htmlという名前で保存する。 1つめのページの2ボタンからpage2.htmlにリンクを張り、3ボタンからpage3.htmlにリンクを張る。 2つめのページの1ボタンからpage1.htmlにリンクを張り、3ボタンからpage3.htmlにリンクを張る。 3つめのページの1ボタンからpage1.htmlにリンクを張り、2ボタンからpage2.htmlにリンクを張る。 全部のファイルをアップロードする。 応用や複雑なことをすればいくらでも応用や複雑にできますが、 HTMLやCSSを勉強し始めてすぐならいきなり応用をせずに、基本となるHTMLで作れるようになったほうが、あとでいろいろ面倒にならなくて済むと思います。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • goo ブログ サムネイルの画像を拡大表示。横の写真は拡大できるけど、縦は無理です。なぜでしょうか?

    goo ブログを使用しています。 サムネイルの画像をクリックすると、別ウィンドウが開いて拡大画像が 表れる方法がありますよね。 そのやり方の基本はマスターしています。 ただ、縦の写真の場合にのみ、拡大画像がサムネイルと同じ大きさで、 拡大されていません。 (試しに、縦の写真を横に回転させて保存し、それをブログの画像ファイルにアップロードしてみたら) 横の写真の拡大が表れました。だから、横の写真だと大きく表示できるみたいです。 私がブログにアップしてる写真のサイズはこんな感じです。 ●画像が横の場合 ブログのサムネイル(W480×H330) → 拡大(W800×H560)・・・きちんと表示されます ●画像が縦の場合(W480×H680) → 拡大(W800×H1100)・・・拡大されていません(T_T) もしかして縦の幅が長すぎるのでしょうか? 試しに(W600×H850)でアップロードしてみましたが、駄目でした。 何が問題なのでしょうか。よろしくお願い致します。

  • 作りたいホームページのイメージ画像をつくりました。

    作りたいホームページのイメージ画像をつくりました。 HPの横のほうに、縦に余白をつくり、真ん中のほうには画像のように縦に長くボックスのようなものをつくり表示するには、どうすればよいでしょうか? htmlとcssは一応軽くは勉強したのですが、どうするか思いつきません。 ボックスのようなものはテーブルを使い挑戦してみたりしたのですが、うまくいかないです。 また、HTMLとCSSだけで、このようなサイトは作れるでしょうか?

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

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

  • 画像を貼り付けた横に文章が書けない。

    ブログに複数の画像を好きな位置に貼り付けたいです。画像はちゃんと表示されますが、そのすぐ横に文章がどうしても書けないのです。 ■ ---------- ---------- ■ ↑こんな風になってしまいます!(説明下手でゴメンナサイ!)どうすれば、すぐ横に文章が書けるでしょうか??? それからブログに貼り付けてある画像を観覧の際に、ダブルクリックして画像が少し大きく表示されたりする場合と、まったくクリックしても画像を表示やコピーをされない場合とありますよね。その違いはなんですか?私は画像を他の人にコピーされたくないので、そういう時のいい方法があればおしえてください。 よろしくお願いします。 説明が、ど!ヘタですみません。

  • ボタンのクリックについて

    ボタンのクリックについて質問です。 CreateWindow()を使ってボタンを作成して表示させているのですが、 ボタンに画像などを表示させている時にクリックをすると、 一瞬、画像などが表示されていない状態になります。 裏画面処理でやってみたりしたのですが出来ませんでした。 やりたい事としては、 http://hp.vector.co.jp/authors/VA018351/ のようにボタンをクリックしても、ちらつきがない様にしたいです。 開発環境 XP Visual Studio 2005 C、C++

  • 画像を横に並べたい

    スタイルシートでマウスオーバーする http://www.auone-net.jp/netguide/hp/mkhp/045/04501.html こちらを参考にCSS等を記述したのですが画像が縦に並んでしまいます。 横に2つ、縦に3列並べたいのですが方法は有りますでしょうか? 是非とも宜しくお願い致します。

  • 画像クリックでラジオボタン選択

    いくつかの画像と、それぞれの横にラジオボタンを表示しています。 今はラジオボタンをクリックしないと画像を選択したことになりませんが、画像をクリックするだけでラジオボタンがチェックされた状態にしたいと思っています。 教えてください。よろしくお願いします。

  • 画像をクリックしないで、きれいに大きく表示する方法

    ブログに画像を貼り付けることができたのですが。クリックしなければ画像が大きくなりません。また、クリックしない状態の画像、ただブログをスクロールしたときに表示される画像ですが。大きく表示することができたのですが。どうやったら、画質を落とさないで、クリックしなくても大きく画像をのせることができるのでしょうか、 クリックをして画像を表示させる方法というのは、ブログに張ってある画像から、別のサーバーというのでしょうか、別の所に保管してある画像データを読み出して表示させていると思うのですが。

  • クリックによる画像の入れ替え処理について

    HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cが一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)Aがクリックされたら、AをA2に置き換える (2)A2が表示されている状態で、Bをクリックすると、A2はAとなり、BはB2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみA2となり、カーソルが離れるとAに戻ってしまう。  クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery?でできるような気がするが、サンプルとなるものがなく、書き方がわからない。  (調べても、ほとんどが一つのコンテンツスペースに複数の画像をクリックで切り替えて表示する、というものばかりでした) 上記について、ご回答よろしくお願いします。

  • 最近ブログなどで画像をクリックすると

    ブログ内のサムネイル画像をクリックすると、ページ移動せずに、 そのサイトないにおいてポップアップといいますか、スムーズにその画像のみが表示されるサイトを良く見かけますが、どの様に設定するのでしょか? さんこうURL: http://ub.blog85.fc2.com/ 等の画像をクリックした場合の表示方法です。 是非、ご教授くださいますようお願い申し上げます。