ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜FAQ

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

※以下のHPの中段くらいにある「office professional plus 2007をつかうと、こんな悩みも解決！」というところが今言っている項目です。
​http://www.microsoft.com/japan/smallbiz/campaign/officecpn0908/defa...​
使用しているソフトはドリームウィーバーCS4です。
質問投稿日時：09/11/08 10:52
質問番号：5430801
最新から表示｜回答順に表示

回答

 
回答者：ken_tyan こちらさんの公開サンプルを参考にすれば簡単ですよ。
　スイッチは画像に変更する。
　ＣＳＳで配置を変更する。
などで大丈夫です。
ジャバスクリプト123さん
​http://javascript123.seesaa.net/article/107931750.html​
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：09/11/09 15:11
回答番号：No.2
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼ありがとうございます。非常に参考になりました。

回答

 
回答者：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を利用してクリックした際に表示する内容を入れ替えているというしくみになっています。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：09/11/09 12:40
回答番号：No.1
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼ありがとうございました。まだまだ未熟者ですがjavascriptについてもっと勉強していかないとと思いました。
最新から表示｜回答順に表示
このページのトップへ