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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3576閲覧

ラジオボタンの組み合わせで画像切替方法

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/10 03:57

編集2018/11/20 09:56

お世話になっております。

ラジオボタンの組み合わせでリンク切替と画像切替をしたく
参考サイトを調べながら構築していき、「リンクの切替」はできたのですが、
どうしても「画像切替」ができなく行き詰まっております。。。

どうか先生方のお力添えをお願いしたいです。
初心者ですのでコードがむちゃくちゃかもしれませんが何卒宜しくお願いします(汗)

html

1 <div class="wrapper"> 2 3 <img src="http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}" id="innerLink" onclick="img()"> 4 5 <div>カラー</div><div id="inner_message">カラーを選択してください。</div> 6 <div>サイズ</div><div id="outer_message">サイズを選択してください。</div> 7 8 <form method="post" name="testpage"> 9 10 <p> 11 ■カラー<br> 12 13 <label> 14 <input type="radio" name="inner" onclick="inner01()" value="" checked><span></span> 15 </label> 16 17 <label> 18 <input type="radio" name="inner" onclick="inner02()" value=""><span></span> 19 </label> 20 </p> 21 22 <p> 23 ■サイズ<br> 24 25 <label> 26 <input type="radio" name="outer" onclick="outer01()" value="100" checked> 27 <span>100</span> 28 </label> 29 30 <label> 31 <input type="radio" name="outer" onclick="outer02()" value="200"> 32 <span>200</span> 33 </label> 34 35 </p> 36 37 <input type="button" value="リンク" onclick="link()"> 38 39 </form> 40 41 </div><!--/.wrapper--> 42

css

1.wrapper { 2 margin: 0 auto; 3 width: 950px; 4}

js

1 2 function inner01(){ 3 document.getElementById("inner_message").innerHTML = "赤"; 4 } 5 6 function inner02(){ 7 document.getElementById("inner_message").innerHTML = "白"; 8 } 9 10 //outer 11 12 function outer01(){ 13 document.getElementById("outer_message").innerHTML = "100"; 14 } 15 16 function outer02(){ 17 document.getElementById("outer_message").innerHTML = "200"; 18 } 19 20 // img 21 function img() { 22 if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true ) { 23 var elmt = document.getElementById("innerLink"); 24 elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}"; 25 } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true ){ 26 var elmt = document.getElementById("innerLink"); 27 elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100"; 28 29 } else if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true ){ 30 var elmt = document.getElementById("innerLink"); 31 elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}"; 32 33 } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true ){ 34 var elmt = document.getElementById("innerLink"); 35 elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}"; 36 } 37 } 38 39 // link 40 function link() { 41 if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true ) { 42 window.location.href =("00-00.html") 43 } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true ) { 44 window.location.href =("01-00.html") 45 } else if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true ) { 46 window.location.href =("00-01.html") 47 } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true ) { 48 window.location.href =("01-01.html") 49 } 50 } 51 52

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/11/21 08:44

現状で「画像をクリックすると画像が切り替わる」機能ができていると思いますが、まだ何か問題があれば追記してください。ないのであれば解決としてください。
退会済みユーザー

退会済みユーザー

2018/11/21 10:16

ご指摘ありがとうございます!まだ、ラジオボタンの組合せで画像が切り替わるまで至ってないので解決しておりません。現在seastar3様の回答を試していますがまだうまくいって無いです;;
x_x

2018/11/22 00:42

「画像をクリックしたら」変わるのですよね?(imgのonclickで書いてますし) そうでないなら質問文に明記してください。回答者もそのタイミングと思っているはずです
退会済みユーザー

退会済みユーザー

2018/11/22 01:14

ご指摘ありがとうございます!おっしゃる通りでした...!解決していますm(_ _)m
guest

回答2

0

html

1<img src="http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}" name="innerLink" onclick="img()">

の name="innerLink" を id="innerLink" にする。( id属性の追加でもよい。)

JavaScript

1document.innerLink.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}"

等が

JavaScript

1 var elmt = document.getElementById('innerLink'); 2 elmt.src = 'http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}';

と各部を差し替えることで、<img>タグをid属性を手掛かりに捉えて、src属性を入れ替えることができます。

投稿2018/11/10 08:48

seastar3

総合スコア2285

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/11/20 08:44

seastar3様 ご回答、誠にありがとうございます!お返事が遅くなり申し訳ありません。 コードをご指摘のように修正してみたのですが、 やはり画像を切替えるように動いてくれませんでした。。 変更したのはご指摘いただいた部分のみです。 なにか記述ミスがありますでしょうか?(汗) teratailのコードも修正しております。 何度もお手数をおかけしてすみませんが ご教授いただければ幸いでございますm(_ _)m
guest

0

ベストアンサー

img()メソッドの中のif文が{ }でくくられていないので、2行セットで動作しないようです。少々編集すれば、以下のような形式になります。

JavaScript

1 if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true ) { 2 var elmt = document.getElementById("innerLink"); 3 elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}"; 4 } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true ){ 5 var elmt = document.getElementById("innerLink"); 6 elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100"; 7 8 } else if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true ){ 9 var elmt = document.getElementById("innerLink"); 10 elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}"; 11 12 } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true ){ 13 var elmt = document.getElementById("innerLink"); 14 elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}"; 15 }

投稿2018/11/20 09:06

seastar3

総合スコア2285

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/11/20 09:59

seastar3様 迅速なご回答誠にありがとうございます! ご指摘いただいたとおり img()メソッドを編集させていただきました! しかしまだ画像を入れ替えるまでに至っておりません。。 私が編集した内容をteratailのコードも同じく編集しております。 何度もお手数をおかけして申し訳ありません。 今一度お力添えいただければ幸いでございますm(_ _)m
seastar3

2018/11/20 13:29

問題を切り分けていき、原因を突き止める必要があります。if文抜きでクリックしたら、dで名前を決めたimgタグの中身を書き換えるメソッド( 仮にShowimg()メソッド )を用意して、ボタンに押したらこのShowimg()メソッドを呼び出して画像が出てくるか試してみて下さい。これが動作したら、if文を拡張していけばできるようになると思います。
退会済みユーザー

退会済みユーザー

2018/11/22 01:15

seastar3様 ご丁寧に教えていただきありがとうございました!解決いたしましたm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問