お世話になっております。
ラジオボタンの組み合わせでリンク切替と画像切替をしたく
参考サイトを調べながら構築していき、「リンクの切替」はできたのですが、
どうしても「画像切替」ができなく行き詰まっております。。。
どうか先生方のお力添えをお願いしたいです。
初心者ですのでコードがむちゃくちゃかもしれませんが何卒宜しくお願いします(汗)
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
回答2件
あなたの回答
tips
プレビュー