- ベストアンサー
JavaScriptを使って商品を扱ったホームページを作成する方法
- 初心者でも分かりやすく、JavaScriptを使って商品を扱ったホームページを作成する方法を解説します。
- チェックボックスを使用して商品の選択と画像の切り替えを行い、ユーザーに箱詰めされた商品のイメージ写真を提供します。
- 2個から4個までの商品を箱詰めすることができます。ウェブサイト作成の参考になるURLも紹介します。
- nami_230
- お礼率34% (8/23)
- JavaScript
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
回答がないみたいなので… ご質問の組合せの数を合計するとかなりの数になると思われますが、表示する画像はそれぞれの組合せに応じて全通り用意しておくのか、いくつかの画像を組合せて表示するつもりなのか不明ですので、雰囲気のみのサンプルです。 いずれにしろ作り直す必要があるとは思いますが、1行ずつ説明していると、とても文字数制限内に入るとは思えませんので省きます。（この回答で字数制限ぎりぎりです） javascriptの基本的な部分については、学習してください。 画像表示の変わりに、message欄に表示画像のsrcを表示するようにしています。 （画像表示の切替は、コメントアウトの行を参考にしてください） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> form input { margin-left: 15px; } #image { width: 200px; height: 200px; } </style> <script type="text/javascript"> <!-- imageDisp = function(evt, frm){ var r, t = evt.target || evt.srcElement; var img = ""; var max = 4; // これ以上の数は選択できない var min = 2; // 選択がこれより少ない時は空箱を表示 var empty = "empty.jpg"; // 空箱画像のURL var extention = ".jpg"; // 画像の拡張子 if(t.nodeName != "INPUT" || t.type != "checkbox") return; r = imageDisp.check(frm); if(r.number<min){ img = empty; } else if(r.number>max){ alert(max + "個以上は選択できません。"); t.checked = false; } else { img = r.value + extention; } if(img){ // document.getElementById("image").src = img; document.getElementById("message").innerHTML = "「" + img + "」の画像を表示"; } } //チェック数・内容を集計 imageDisp.check = function(f){ var elm = f.elements; var e, i=0, count=0, val=""; while(e = elm[i++]){ if(e.nodeName=="INPUT" && e.type=="checkbox" && e.checked){ count++; val += e.value; } } return {number:count, value:val}; } //--> </script> </head> <body> <form name="form1" action="" method="" onclick="imageDisp(event, this)"> <input type="checkbox" value="A">A <input type="checkbox" value="B">B <input type="checkbox" value="C">C <input type="checkbox" value="D">D <input type="checkbox" value="E">E <input type="checkbox" value="F">F </form> <div style="margin-top:50px;"> <img id="image" src="empty.jpg" alt="empty"> <span id="message"> </span> </div> </body> </html
お礼
説明不足の中、ご回答ありがとうございました。 教えて頂いた内容を理解し、私の希望したもの作成できるように頑張ってみます。 ありがとうございました。