画像をクリックすると下の画像も同時に切り替わるページを作りたい

質問

ホームページでたまに見るのですが、ある画像をクリックすると下にその項目の説明をする画像などが出てくることがあります。現在ホームページ作成の練習中なのですがソースを見てもいまいちよくわかりません。詳しい方いらっしゃいましたらお教え願います。

※以下のHPの中段くらいにある「office professional plus 2007をつかうと、こんな悩みも解決！」というところが今言っている項目です。
http://www.microsoft.com/japan/smallbiz/campaign/officecpn0908/default.mspx
使用しているソフトはドリームウィーバーCS4です。

回答No.2

noname#119957

こちらさんの公開サンプルを参考にすれば簡単ですよ。
　スイッチは画像に変更する。
　ＣＳＳで配置を変更する。
などで大丈夫です。
ジャバスクリプト123さん
http://javascript123.seesaa.net/article/107931750.html

お礼

ありがとうございます。非常に参考になりました。

回答No.1

fujillin

ご提示のページのソースの該当部分を簡略化すると、以下のような構成になっています。
-------------------------------------------------------
<div class="Read_area02">

<ul class="clearfix">
<li><a href="#tab_area01"><img src="/Btn01_off.gif"></a></li>
<li><a href="#tab_area02"><img src="/Btn02_off.gif"></a></li>
<li><a href="#tab_area03"><img src="/Btn03_off.gif"></a></li>
</ul>

<div id="tab_area01"><div class="Tab_head clearfix">
<p><strong>Office 2007 を使用すると、外注や出張にかかる費用を削減し、売上管理を強化することで、収益性を高めることができます。
</strong></p>
</div></div>
<div id="tab_area02"><div class="Tab_head clearfix">
<p><strong>Office 2007 を使用すると、仕事の効率と質が向上し、そして作業に費やす時間を短縮できます。</strong></p>
</div></div>
<div id="tab_area03"><div class="Tab_head clearfix">
<p><strong>Office 2007 を使用すると、個人情報や機密情報が不当に漏れないようコントロールすることができ、<br>コンプライアンスを徹底することができます。</strong></p>
</div></div>

<!-- /Read_area02 --></div>
-----------------------------------------

<ul>～～</ul>部分が上部に表示されるタブ状の部分になっており、その下に表示される内容が、<div>のtab_area01～03にそれぞれ記されています。
（こちらは同時に1つしか表示されないように、制御している）
ul内のliの各リンクタグには、
onclick="showArea('tab_area01');return false;" onkeypress="showArea('tab_area01');"
のように設定されていて、クリックした際に対応する内容をスクリプトで表示するようにしていると思われます。
実際の処理（コード）は、function showArea()内に書かれているはずですが、こちらは外部スクリプトで読み込んでいるようで、HTMLソース内には見当たりません。

処理内容までは確認していませんが、いずれにしろ、javascriptを利用してクリックした際に表示する内容を入れ替えているというしくみになっています。

お礼

ありがとうございました。まだまだ未熟者ですがjavascriptについてもっと勉強していかないとと思いました。