- ベストアンサー
ボタンクリックでボタン画像を変えて、更に横に画像を
最近ブログを始めて、html、cssを勉強しているのですが、分からないことがあるので質問させて頂きます。 私が作りたいのはボタン画像を縦にいくつか並べて、クリックするとその横に画像が表示され、ボタンも押した状態(画像が変わっている)になっているというものです。 また、cssとhtmlでないのでしたらサイトへのアップや記載方法なども教えていただきたいです。 もしお分かりの方がいましたら、よろしくお願いします。
- jasmine_01
- お礼率16% (2/12)
- CSS
- 回答数4
- ありがとう数2
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
>No.3 なるほど。。。 読み返してみると、質問の主旨は2つあるというようにも読めますね。 >私が作りたいのはボタン画像を縦にいくつか並べて、 縦に並べるのはどうすればいいか? >クリックするとその横に画像が表示され、ボタンも押した状態(画像が変わっている)になっているというものです。 クリックすると画像をかえるにはどうすればいいか? 私は後者が主旨だと思って答えました。 「クリックしたらほかの場所にある画像も変わる」=ページをかえれば良いという考え方は、 縦に並べるとか横に並べるとかのレイアウト(デザイン)だけでなく、 サイドバーのボタンを押すと、本文中やヘッダにある画像が変わるというようなデザインにも応用は利きます。 前者の質問であるなら、 表(ひょう)と思われたのなら<table>を使えばいいと思いますし、段落(一般文章の中の画像)なら<p>と<br>、箇条書きなら<ul>を使えばいいと思います。 私なら<table>を使います。ご参考まで。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
すみません。No.2です。 >最近ブログを始めて、html、cssを勉強しているのですが、 説明をはしょりすぎて、意図が伝わらないかと・・ この様に書かれたHTMLがありますが、それを「ボタン画像を縦にいくつか並べて、クリックするとその横に画像が表示され、ボタンも押した状態(画像が変わっている)になっている」様にプレゼンテーションしたいのですが」 という質問でしたら、CSSを説明できるということです。 元になるHTMLは、著者であるあなた以外には書けないのです。 なぜなら、その文書内で画像と文字列がどのような意味で構成され、さらにそれが文書全体におけるどのような構成要素であるかは、あなたにしかわからないからです。 それをマークアップするのがHTMLの目的ですから・・ No.2の回答で示したいくつかのHTMLを参考に、あるいはもっと意味が違うのか、まずHTMLを示してください。 No.1さんの回答も、そのような意味ですね。たぶん。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
基本的な考え方を見直しましょう。出発点が間違っています。 まず、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を書くときにもっとも大事なことは、文書全体において、この部分がどのような構成要素であるかを正しくマークアップするかと言うことです。
- 神崎 渉瑠(@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
- 画像クリックでラジオボタン選択
いくつかの画像と、それぞれの横にラジオボタンを表示しています。 今はラジオボタンをクリックしないと画像を選択したことになりませんが、画像をクリックするだけでラジオボタンがチェックされた状態にしたいと思っています。 教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像をクリックすると
ランキングサイトに飛ばしたい。 お世話になります。FC2にてブログをやっていますが、 画像(自分の写真等)をクリックさせるとランキングに飛ぶ やり方をお教え下さい。 画像アップでサムネイルで表示させるのはわかるのですが、、、 宜しくお願いします。
- ベストアンサー
- ブログ
- 画像を貼り付けた横に文章が書けない。
ブログに複数の画像を好きな位置に貼り付けたいです。画像はちゃんと表示されますが、そのすぐ横に文章がどうしても書けないのです。 ■ ---------- ---------- ■ ↑こんな風になってしまいます!(説明下手でゴメンナサイ!)どうすれば、すぐ横に文章が書けるでしょうか??? それからブログに貼り付けてある画像を観覧の際に、ダブルクリックして画像が少し大きく表示されたりする場合と、まったくクリックしても画像を表示やコピーをされない場合とありますよね。その違いはなんですか?私は画像を他の人にコピーされたくないので、そういう時のいい方法があればおしえてください。 よろしくお願いします。 説明が、ど!ヘタですみません。
- ベストアンサー
- ブログ
- ボタンクリックによる画像の変更
はじめまして。 色々と調べたり考察してみたのですが方法が見つからないので質問致します。 □□□□ □□■□ ○ボタン □□□□ □、■=画像ファイル 同一フレームの中に上図のように数個の画像ファイルが並べてあります。 その横にボタンを配置します。 そのボタンをクリックすることで■の画像ファイルをAからBに変更すること可能でしょうか? また、可能であればその方法を教えて下さい。
- ベストアンサー
- HTML
- goo ブログ サムネイルの画像を拡大表示。横の写真は拡大できるけど、縦は無理です。なぜでしょうか?
goo ブログを使用しています。 サムネイルの画像をクリックすると、別ウィンドウが開いて拡大画像が 表れる方法がありますよね。 そのやり方の基本はマスターしています。 ただ、縦の写真の場合にのみ、拡大画像がサムネイルと同じ大きさで、 拡大されていません。 (試しに、縦の写真を横に回転させて保存し、それをブログの画像ファイルにアップロードしてみたら) 横の写真の拡大が表れました。だから、横の写真だと大きく表示できるみたいです。 私がブログにアップしてる写真のサイズはこんな感じです。 ●画像が横の場合 ブログのサムネイル(W480×H330) → 拡大(W800×H560)・・・きちんと表示されます ●画像が縦の場合(W480×H680) → 拡大(W800×H1100)・・・拡大されていません(T_T) もしかして縦の幅が長すぎるのでしょうか? 試しに(W600×H850)でアップロードしてみましたが、駄目でした。 何が問題なのでしょうか。よろしくお願い致します。
- 締切済み
- ブログ
- 作りたいホームページのイメージ画像をつくりました。
作りたいホームページのイメージ画像をつくりました。 HPの横のほうに、縦に余白をつくり、真ん中のほうには画像のように縦に長くボックスのようなものをつくり表示するには、どうすればよいでしょうか? htmlとcssは一応軽くは勉強したのですが、どうするか思いつきません。 ボックスのようなものはテーブルを使い挑戦してみたりしたのですが、うまくいかないです。 また、HTMLとCSSだけで、このようなサイトは作れるでしょうか?
- ベストアンサー
- HTML
- 最近ブログなどで画像をクリックすると
ブログ内のサムネイル画像をクリックすると、ページ移動せずに、 そのサイトないにおいてポップアップといいますか、スムーズにその画像のみが表示されるサイトを良く見かけますが、どの様に設定するのでしょか? さんこうURL: http://ub.blog85.fc2.com/ 等の画像をクリックした場合の表示方法です。 是非、ご教授くださいますようお願い申し上げます。
- 締切済み
- ブログ
- ブログで画像を横に2つ並べる方法
ブログで画像を横に2つ並べる方法を教えてください。ちなみにライブドアブログです。縦に2つ並べる場合は、普通に2つアップロードすればいいんですよね?横に2つになると..... よろしくお願いします。
- ベストアンサー
- ブログ
- ボタンクリックで画像を替えたい
はじめまして。 ホームページを作成しているのですが、解決できない問題があり 皆様方のお知恵を拝借したく投稿させていただきました。 どうかお力添えをいただけますと幸いです。 具体的な内容としまして、 大きな画像(400px×125px)の下に横並びでボタン(80px×25px)を5つ配置しているのですが そのボタンをクリックすると大きな画像部分がクリックしたボタンに あわせて入れ替わって表示されるようにしたいのです。 ボタンA → 画像A ボタンB → 画像B ボタンC → 画像C ボタンD → 画像D ボタンE → 画像E という風に変化させていのですが 今ひとつ方法がわからずに苦しんでいます。。 これをFLASHをつかわず作成したいと考えています。 説明不足、言葉足らずなどあるかとは思いますが どなたかお力添えをいただけませんでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
お礼
私のしたかったことは、ブログのヘッダー部分にそのような表記ができないかと思って、 cssやJavaScript、FLASHなどで探していたのですが、表示幅を変えたり、ボタン画像を 変えるなどをどう書いたらいいか分からず、行き詰っていました。 無知なこともありますが、まだまだいろんな事が勉強不足ですね^^; 分かりづらい質問に答えていただきありがとうございました。