0

1つから2つの画像に切り替えてから、onlickで1つに戻す方法を理解しようとしています。

これまでのところ、1つの画像に切り替えて元の画像に戻すのに問題なく機能する以下があります。最終的に、最初のonclickイベントを垂直方向に2つの画像にしてから、もう一度クリックして最初の1つの画像に戻ろうとしています。

var play = false;
    function toggle() {
        var image = document.getElementById('image')
        var scan = document.getElementById('scan');
        play = !play;
        if (play) {
            image.src = "pause.png";image.width="182";image.height="182";image.border="0";
            scan.play();
        }
        else {
            image.src = "play.png";image.width="182";image.height="182";image.border="0";   
            scan.pause();
        }
    }

と体の中で：

<a href="javascript:void(0)"><img onclick="toggle()" id="image" src="play.png" alt="image" width="182" height="182" style="margin:auto; position:absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0;"></a>
4

1 に答える 1

0

これは、javascript から幅、高さ、および境界線を取り出すことを除いて、正常に動作するはずです。それらは変更されていません。

私はこれをテストするために本当に素早くまとめました.もちろん、scan.playとpauseをコメントアウトしましたが、ブラウザでコンソールをチェックして、それらがエラーをスローしているかどうかを確認したと仮定しています. ?

<a>クリック可能な要素の代わりにスタイルを取り出して使用しましcursor=pointerた..どちらの方法でも機能しますが、これはよりきれいで、ie6から機能すると思います.ie7 +は間違いなく.

edit: removed source block didn't achieve goal of question

コメントで議論した後、それを行う方法はたくさんあります。おそらくjQueryを使用しますが、あなたがここにいないので、そうではありません

<!doctype html>
<html>
<head>
    <script type="text/javascript">
        var play = true;
        function toggle() {
            //var scan = document.getElementById('scan');
            var playpause = document.getElementById('playpause');
            var btnplay = playpause.getElementsByClassName('play');
            var btnpause = playpause.getElementsByClassName('pause');
            play = !play;
            if (play) {
                btnplay[0].className = 'btn play active';
                btnpause[0].className = 'btn pause';
                //scan.play();
            }
            else {
                btnplay[0].className = 'btn play';
                btnpause[0].className = 'btn pause active';
                //scan.pause();
            }
        }
    </script>

    <style>
        .btn {
            width: 182px;
            height: 182px;
            cursor: pointer;
            position: absolute;
            visibility: hidden;
        }
        .btn.active { visibility: visible; }
        .btn.play { background: url('play.png') no-repeat 0 0; }
        .btn.pause { 
            background: url('pause.png') no-repeat 0 0;
            padding: 182px 0 0 0;
        }
    </style>
</head>
<body>
    <div id="playpause">
        <div class="btn play active" onclick="toggle()">
        </div>
        <div class="btn pause" onclick="toggle()">
            <img src="other.png" alt="other" />
        </div>
</body>
</html>
于 2012-08-12T00:19:09.583 に答える