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

最近ブログを始めて、html、cssを勉強しているのですが、分からないことがあるので質問させて頂きます。


私が作りたいのはボタン画像を縦にいくつか並べて、クリックするとその横に画像が表示され、ボタンも押した状態（画像が変わっている）になっているというものです。

また、cssとhtmlでないのでしたらサイトへのアップや記載方法なども教えていただきたいです。


もしお分かりの方がいましたら、よろしくお願いします。

No.4 ベストアンサー 回答者： taloo 回答日時： 2011/08/03 02:54

>No.3

なるほど。。。
読み返してみると、質問の主旨は２つあるというようにも読めますね。


>私が作りたいのはボタン画像を縦にいくつか並べて、
縦に並べるのはどうすればいいか？

>クリックするとその横に画像が表示され、ボタンも押した状態（画像が変わっている）になっているというものです。
クリックすると画像をかえるにはどうすればいいか？


私は後者が主旨だと思って答えました。

「クリックしたらほかの場所にある画像も変わる」＝ページをかえれば良いという考え方は、
縦に並べるとか横に並べるとかのレイアウト（デザイン）だけでなく、
サイドバーのボタンを押すと、本文中やヘッダにある画像が変わるというようなデザインにも応用は利きます。


前者の質問であるなら、
表（ひょう）と思われたのなら<table>を使えばいいと思いますし、段落（一般文章の中の画像）なら<p>と<br>、箇条書きなら<ul>を使えばいいと思います。
私なら<table>を使います。ご参考まで。

この回答へのお礼

私のしたかったことは、ブログのヘッダー部分にそのような表記ができないかと思って、
cssやJavaScript、FLASHなどで探していたのですが、表示幅を変えたり、ボタン画像を
変えるなどをどう書いたらいいか分からず、行き詰っていました。

無知なこともありますが、まだまだいろんな事が勉強不足ですね＾＾;

分かりづらい質問に答えていただきありがとうございました。

お礼日時：2011/08/03 23:16

No.3 回答者： ORUKA1951 回答日時： 2011/08/01 17:30

すみません。

No.2です。
＞最近ブログを始めて、html、cssを勉強しているのですが、
説明をはしょりすぎて、意図が伝わらないかと・・

　この様に書かれたHTMLがありますが、それを「ボタン画像を縦にいくつか並べて、クリックするとその横に画像が表示され、ボタンも押した状態（画像が変わっている）になっている」様にプレゼンテーションしたいのですが」

　という質問でしたら、CSSを説明できるということです。

　元になるHTMLは、著者であるあなた以外には書けないのです。
　なぜなら、その文書内で画像と文字列がどのような意味で構成され、さらにそれが文書全体におけるどのような構成要素であるかは、あなたにしかわからないからです。
　それをマークアップするのがHTMLの目的ですから・・

　No.2の回答で示したいくつかのHTMLを参考に、あるいはもっと意味が違うのか、まずHTMLを示してください。

　No.1さんの回答も、そのような意味ですね。たぶん。

No.2 回答者： ORUKA1951 回答日時： 2011/08/01 15:01

基本的な考え方を見直しましょう。

出発点が間違っています。
まず、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 回答日時： 2011/08/01 04:25

１つめの状態になっているページを作り、たとえばpage1.htmlという名前で保存する。

同様に２つめの状態になっているページ、３つめの状態になっているページを作り、それぞれpage2.html、page3.htmlという名前で保存する。

１つめのページの２ボタンからpage2.htmlにリンクを張り、３ボタンからpage3.htmlにリンクを張る。
２つめのページの１ボタンからpage1.htmlにリンクを張り、３ボタンからpage3.htmlにリンクを張る。
３つめのページの１ボタンからpage1.htmlにリンクを張り、２ボタンからpage2.htmlにリンクを張る。

全部のファイルをアップロードする。


応用や複雑なことをすればいくらでも応用や複雑にできますが、
HTMLやCSSを勉強し始めてすぐならいきなり応用をせずに、基本となるHTMLで作れるようになったほうが、あとでいろいろ面倒にならなくて済むと思います。