質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • PHP

    20906questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17069questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4193questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

ボタンをクリックしたら、画像が切り替わるようにしたい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 683

freeway1118

score 8

初めての投稿になります。初心者すぎる質問で申し訳ありません。

HTMLとCSSである程度WEBのトップ画面(下写真)を作成したのですが、
ここから、 左側の4つのブランドロゴの下にある Next と Back のボタンを押すたびに、4つのブランドの配置が切り替わるようにできないかと考えています。
また、ボタンを押してブランドのロゴを切り替える度に、最前面に配置されたブランドロゴに紐づく商品イメージ(右側の写真)が出るように設計したいです。

イメージ説明

なお、現在のHTMLコードは下の感じです。

```

<aside>     <h1>Original Brand</h1>

    <div class="Aside_OriginalBrand">

    <div class="OriginalBrand_BackArrow"><a href="#">         <img src="img/Arrow/BackArrow.jpg" width="80" height="30" alt="BackArrow"/>

    </a></div> 

        <ul><!--各liのimg要素のソースの末尾番号をKeyにしたい-->             <li class="OriginalBrand_01"><a href="maison_de_naturel.com">                   <img src="img/OriginalBrand/OriginalBrand_01.png" alt="maison_de_naturel"></a></li>

            <li class="OriginalBrand_02"><a href="cuew.com">                   <img src="img/OriginalBrand/OriginalBrand_02.png" alt="cuew"></a></li>

            <li class="OriginalBrand_03"><a href="f_choice.com">                   <img src="img/OriginalBrand/OriginalBrand_03.png" alt="f_choice"></a></li>

            <li class="OriginalBrand_04"><a href="e_smith.com">                   <img src="img/OriginalBrand/OriginalBrand_04.png" alt="e_smith"></a></li>         </ul>

        <div class="OriginalBrand_NextArrow"><a href="#">         <img src="img/Arrow/NextArrow.jpg" width="80" height="30" alt=""/>

    </a></div> 

     <!--class="OriginalBrand_04"と連動させたい-->     <div class="Aside_OriginalBrandImg">         <img src=         "img/OriginalBrandImg/OriginalBrandImg_.jpg" width="548" height="360" alt=""/>       <a href="maison_de_naturel.com">         <button class="btn">詳細を見る</button>       </a>     </div>     <!--↑Aside_OriginalBrandと#をPHPで連動させたい-->

</div> </aside>

```

既にマークアップでもいろいろと問題があると思いますが、ここからどうプログラミング言語を設定すれば自分のイメージに近づけられるか教えていただけませんでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • tkturbo

    2016/03/25 16:45

    ソースは画面キャプチャではなくテキストのコピー&ペーストでお願いします。

    キャンセル

  • freeway1118

    2016/03/25 16:59

    指摘、ありがとうございます。画面キャプチャからテキストのコピー&ペーストに切替えました。

    キャンセル

  • tkturbo

    2016/03/25 17:01

    「OriginalBrand_BackArrow」「OriginalBrand_NextArrow」あたりを押したら何か処理をするようにjavascriptを書いてると思いますが、そのあたりも追加で。

    キャンセル

  • freeway1118

    2016/03/25 17:05

    javascriptの記載は処理の記述が分からなくて、まだ何もしてないんです。><どうしたらいいでしょうか?

    キャンセル

回答 2

checkベストアンサー

0

まず、ボタンと「ボタンが押される」というイベントを紐づけなければなりません。

1.どのボタンで? => document.getElementsByClassName(クラス名)で取得できるでしょう。配列になってますけど。
2.どんなイベント? => addEventListener(処理)で1のボタンがクリックされたイベントを処理と紐づけます。
3.処理の中身は? => 並べ替え?対象は1と同様にliタグについてるクラス名で取得すればいいんじゃないかと。

まあ、だいたいこんな感じ。

/* javascript-1 */
document.getElementsByClassName('OriginalBrand_NextArrow')[0].addEventListener(
    'click',
    function(){
        // このブロックに処理の内容
    }
);

このやり方だとNextボタンにaタグ不要になるので、

<!-- html_1 -->
<div class="OriginalBrand_NextArrow">
    <img src="img/Arrow/NextArrow.jpg" width="80" height="30" alt=""/>
</div>


これで十分。

あと、liタグを並べ替えたいんなら、ulタグにid属性つけた方がよさそう。
id属性があると「document.getElementById(id属性の値)」ulタグが取れるので。

たとえば

<!-- html_2 -->
<ul id='aside'><!--各liのimg要素のソースの末尾番号をKeyにしたい-->


とかにしておくと、javascript-1の処理内容はこんな感じかな?

/* javascript-2 */
// ulタグを取得
var ul = document.getElementById('aside');
// 次を表示=先頭のliタグを最後に入れる。のでliタグの配列を持ってくる。
var list = ul.getElementsByTagName('li');
// ↑これはulタグの中に入ってるliタグをタグ名で全部持ってくるやつ。
ul.appendChild(list[0]);
// appendChildは子供の要素を末尾に追加する、ということ。
// 先頭のを最後に持っていったら2番目のが繰り上げ先頭。

「やりたいこと」の関連キーワードはだいたい入ってるから後はGoogle先生とよろしく。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/25 20:51

    有難うございます!とても参考になります。
    ただ、javascriptの知識が圧倒的に不足してる事も同時に痛感してます。なのでこの質問は、jsについてもう少し勉強してから仕上げて再度こちらにアップします><

    キャンセル

0

先頭の説明文が日本語変だったので修正しますたorz

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    window.open を使わずにpopupする方法

    window.open を使わずにpopup画面を表示し、 その中でボタンを押したりしたい div 要素を動的に変えて、モーダルで・・・ という方法があるようですが、 元の画面

  • 解決済

    コンテンツの作成方法

    下記参考サイトの様に、 画像をマウスオーバーすると、 キャプションが現れるコンテンツを作成したいと考えております。 【 参考サイトURL 】 http://www.basicag

  • 解決済

    javascriptのfunction実行優先度(画像拡大機能)

    こんにちは。 javascript初心者です。 運営中のサイトで要望があり、機能を追加することになりましたが、 動作が安定しないため、質問させていただきます。 現在運営しているE

  • 解決済

    離れた場所にある画像を変えるjavascript

    特定の画像にマウスオンすることで離れた場所にある画像を変えるjavascriptを使ってHTMLを組んでいます。 ](9634e41e9ed4f6d80695fd076c2c8a8

  • 受付中

    レスポンシブサイトのコーディングについて

    レスポンシブサイトのヘッダーで、古いデザインのサイトを作っているのですが、 古いデザインはヘッダーにロゴ、h1、問いあわせ、文字拡大ボタンなどが、二列になってぎゅうぎゅうに詰まって

  • 解決済

    チェックボックスを組み込みたいのですが、上手くいきません。

    後述するウェブサイトを製作中ですが、 そのデザインの中の「BOX◯」の箇所に「チェックボックス」を取り入れたいのですが、当方で組み込もうとするとレイアウトが崩れてしまいます。このレ

  • 解決済

    特定のclassを含む親要素にclassを追加したい

    特定のclassを含む親要素にclassを追加したいです。 具体的には、下記のように「hoge_child」という要素を含む親要素にのみ「hoge」クラスを追加したいです。 ■

  • 解決済

    jquery「Slider Pro」の矢印の位置を変えたい

    jquery「Slider Pro」を以下のサイトのようにブラウザ幅いっぱいで表示させるようにしようとしています。 http://goo.gl/uZ1Jxb 左右の矢印がブラウ

同じタグがついた質問を見る

  • PHP

    20906questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17069questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4193questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。