1

帽子をかぶった人のイメージがあります。ユーザーが下の別の色見本をクリックするたびに、別の画像 (同じ帽子/別の色) に変更されるこの画像の上に、帽子の «master.png» 画像 (それ自体) があります。

JavaScript 関数は機能しますが、カラー変数の値をスウォッチに割り当てることができませんでした。そのため、どのスウォッチをクリックしても、最後にリストされた js src イメージのみが表示されます。私のjavascript変数コードが正しいかどうかもわかりません。

これを行う方法について、ウェブ上で何も見つけることができませんでした。助けてください！

コードは次のとおりです。

<script type="text/javascript">
function hat(color)
{
var color = ['redhat', 'bluehat', 'blackhat'];
document.getElementById("master").src="images/redhat.png"; 
document.getElementById("master").src="images/bluehat.png"; 
document.getElementById("master").src="images/blackhat.png"; 
}
</script>



<img id="hat" src="images/manwearinghat.png" width="100%" class="center">


<img id="master" src="images/masterhat.png" width="100%" alt=" " name="master">




<img src="images/swatchs/redswatch.png" width="69" height="69" onclick="hat('redhat');" value="redhat" style="z-index:3">


<img src="images/swatchs/blueswatch.png" width="69" height="69" onclick="hat('bluehat');" value="bluehat" style="z-index:3">


<img src="images/swatchs/blackhat.png" width="69" height="69
" onclick="hat('blackhat');" style="z-index:3">
4

3 に答える 3

2

次のような単純なものを使用できます。

function hat(color) {
    document.getElementById("master").src = "images/" + color + ".png"; 
}
于 2012-08-10T22:09:05.697 に答える
0

あなたはすでに色の名前を渡しているので、あなたがする必要があるのは

  function hat(color) {
    document.getElementById("master").src = "images/" +color+".png";
}

イメージを変更します。

于 2012-08-10T22:14:12.393 に答える
0

このコードはあまりコンパクトではありませんが、動作します。HTML:

    <img id="hat" src="images/manwearinghat.png" width="100%" class="center">
    <div id="master"></div>
    <div>
        <img src="images/swatchs/redswatch.png" width="69" height="69" onclick="hat('redhat');"    
     value="redhat" style="z-index:3">


    <img src="images/swatchs/blueswatch.png" width="69" height="69" onclick="hat('bluehat');"
    value="bluehat" style="z-index:3">


    <img src="images/swatchs/blackhat.png" width="69" height="69
    " onclick="hat('blackhat');" style="z-index:3">
    </div>

Javascript:

    function hat(color){
        if (color == 'bluehat'){
            document.getElementById('picture').innerHTML=<img id="master" 
    src="images/bluehat.png" width="100%" alt=" " name="master">
        if (color == 'blackhat'){
            document.getElementById('picture').innerHTML=<img id="master"
    src="images/blackhat.png" width="100%" alt=" " name="master">

        if (color == 'redhat'){
            document.getElementById('picture').innerHTML=<img id="master" src="images/redhat.png"
    width="100%" alt=" " name="master">
    };
于 2013-04-22T01:52:10.277 に答える