1

ボタンのように機能するimgを作成するために、htmlと非常に基本的なjQueryを組み合わせて使用​​しているため、imgをクリックすると、画像のsrc（src1）が別のsrc（src2、つまり画像）に変わります。ボタンが押されたの）。同じ画像（現在はsrc2）をクリックすると、元のsrc（src1）に戻るようにしようとしています。

それが理解するのに頭痛の種ではなかったことを願っています。必要に応じて明確にすることができます。

これが私がコードのために持っているものです：

<!--Html-->
<body>
<img id="pixelbutton" src="images/pixelbutton.png" onClick="pixelbuttonclick()" />
</body>

/* jQuery */

function pixelbuttonclick() {
var pixelbutton = document.getElementById("pixelbutton");

if (pixelbutton.style.src=="images/pixelbutton.png") {
    document.getElementById("pixelbutton").src="images/pixelbutton_press.png";
    }


else if (pixelbutton.style.src=="images/pixelbutton_press.png") {
    document.getElementById("pixelbutton").src="images/pixelbutton.png";
    }

}

私は巨大な初心者なので、可能であれば、それほど複雑でない答えをいただければ幸いです。

4

2 に答える 2

0

URL を置き換える代わりに、背景画像 css プロパティを持つ div を使用し、背景画像として別の画像を使用して div のクリック時に別のクラスを設定できます。

于 2012-10-17T02:39:34.080 に答える
0

そうでない場合は、一貫性を保つために関数を head セクションに配置することをお勧めします。

あなたの "pixelbutton.style.src" は間違っていました。なぜなら src は属性であり、css には含まれていませんが、URL を操作するのはかなり難しいからです。CSSで背景画像を使用するというAmareswarの回答に同意します。

これを行う別の方法は、jQuery コードを使用することです。

<script type="text/javascript">
    $(document).ready(function(){
        $("#pixelbutton").click(function(){
            $("#pixelbutton").css({'display':'none'})
            $("#pixelbutton2").css({'display':'block'});
        })
        $("#pixelbutton2").click(function(){
            $("#pixelbutton2").css({'display':'none'})
            $("#pixelbutton").css({'display':'block'});
        })
    })
</script>

ボディコードを変更します：

<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
于 2012-10-17T03:31:07.117 に答える