2

SO 私はモニター上の建物に表示する約 50 個のトグル ボタンを表示する画面を作成しようとしています。

見やすいように、トグルとして使用する画像をたくさん作成したいと思います。これが私が望む効果です。 http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_intro 画像を除く いくつかの電球を好きなように点けたり消したりしたいです。

今、これは私が持っているコードです。画像をクリックして好きなように変更できますが、元に戻すことはできません。何かアイデアはありますか?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01    
    Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <title>Untitled Document</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <meta http-equiv="Content-Style-Type" content="text/css"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript"> 
    <script type="text/javascript">
    function changeImg(img, newimg) {
    img.src = newimg;
    }


    </script>
    <body>
    <img onclick="changeImg(this, 'staten_uw.jpg')" src="staten_moored.jpg">
    <img onclick="changeImg(this, 'block_uw.jpg')" src="block_moored.jpg">
    </body>
    </html>
4

3 に答える 3

2

コードは常に _uw 画像に変更するため、元に戻りません。それらを切り替えたい場合、関数は現在表示されている画像を確認する必要があります。このようなもの：

function changeImg(img) {
    if ( img.src.indexOf("_uw") > 0 ) {
        img.src = img.src.replace("_uw","_moored");
    }
    else {
        img.src = img.src.replace("_moored","_uw");
    }
}

「img1_uw.jpg」、「img1_moored.jpg」、「img2_uw.jpg」、「img2_moored.jpg」などの名前の 50x2 の異なる画像がある場合に機能します。

画像が 2 つしかなく、それぞれが切り替わる 50 個のボタンが必要な場合は、次のようにすると簡単です。

function changeImg(img) {
    if ( img.src == "staten_uw.jpg" ) {
        img.src = "staten_moored.jpg";
    }
    else {
        img.src = "staten_uw.jpg";
    }
}

他の回答もこれを非常に簡単に示しています。

いずれにしても、HTML は次のように変更されます。

<img onclick="changeImg(this)" src="block_moored.jpg">
于 2012-07-20T16:42:24.020 に答える
1

あなたはこれを行うことができます：

window.onload = function() {
    images = document.getElementsByTagName("img");
    for (i in images) {
        images[i].addEventListener("click", function(e) {
            var newsrc = this.togglesrc;
            this.togglesrc = this.src;
            this.src = newsrc;
        });
    }
};

そして使用する

<img togglesrc="staten_uw.jpg" src="staten_moored.jpg" />
于 2012-07-20T16:44:52.267 に答える
0

あなたの場合、img タグを 1 つだけ使用する必要があります。

<img onclick="changeImg(this)" src="staten_moored.jpg">

js のロジックを確認します。

function changeImg(img) {
  img.src = (img.src == 'staten_moored.jpg') ? 'block_moored.jpg' : 'staten_moored.jpg';
}
于 2012-07-20T16:48:07.553 に答える