0

しばらくこれを探しましたが、必要なものに合うと思われるものを見つけることができません。ドロップダウン メニューで選択した色に応じて、T シャツのイメージを別の色に変更できるようにしたいと考えています。

DDL は次のとおりです。

<select name="Colours" onchange = "changeImage()">
                    <option value="White">White</option>
                    <option value="Red">Red</option>
                    <option value="Blue">Blue</option>
                    <option value="Yellow">Yellow</option>
                    <option value="Purple">Purple</option>
            </select>

これが私が書いたJS関数です（switchステートメントはオプションごとに繰り返されます）：

           <script type="text/javascript">
               function changeImage(){
                       var x = document.getElementById("Colours").value;
                       switch(x){
                       case "White":
                                  document.Mainimg.src = images/white.jpg;
                                  location.reload();
                                  break;
                       case "Red":
                                 document.Mainimg.src = images/red.jpg;
                                 location.reload();
                                 break;

最後に、必要に応じて、画像のコード:

                <div id="main_img">
                    <img id="Mainimg" name="Mainpic" src=images/white.jpg>
                </div>

リストで新しいオプションを選択しても何も起こりません。これを行う方法について完全に間違った考えを持っていますか、それとも単なる微調整ですか?

助けてくれてありがとう。

4

2 に答える 2

1

を削除しlocation.reload()ます。ページをリロードすると、変更が失われます。画像の を変更するsrcだけで、画像が読み込まれます。

getElementById を使用して画像を取得し、URL を引用符で囲みます。

document.getElementById('Mainimg').src = "images/white.jpg";

不足している引用符は、コンパイル エラーを示すコンソールを使用するだけで発見できた可能性があります。コンソールを使用します。

于 2013-03-14T18:28:32.917 に答える
0

おそらくあなたがやりたいことはこれです： http://jsfiddle.net/jWbUv/

HTML:

<select name="Colours" onchange = "changeImage(this)">
                    <option value="">please select</option>
                    <option value="White">White</option>
                    <option value="Red">Red</option>
                    <option value="Blue">Blue</option>
                    <option value="Yellow">Yellow</option>
                    <option value="Purple">Purple</option>
            </select>
 <div id="main_img">
 </div>

JS:

function changeImage(src) {
    var mainImg = document.getElementById('main_img');
    mainImg.style.setProperty('background-image', 'url(\''+ src.value +'.png\')');
}

CSS:

 #main_img {
        width: 100px;
        height: 100px;
        background-size: contain;
        background-repeat: no-repeat;
    }
于 2013-03-14T18:46:29.500 に答える