Question

试图弄清楚如何从一个图像切换到两个图像然后再回到一个图像。

到目前为止，我已经在下面切换到一个图像并返回原始图像没有问题。最终我试图将第一个onclick事件垂直放置两个图像，然后再次单击回到第一个单个图像。

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>

Answer 1

这应该可以正常工作，除了从javascript中取出宽度，高度和边框，它们没有改变，所以为什么要在那里并冒一些浏览器吓坏它们？

我只是快速地将它放在一起进行测试并且它有效。我已经注释掉scan.play和暂停当然但我假设您已经在浏览器中检查了控制台，看看它们是否是抛出任何错误？

我把<a>取出并使用了样式cursor=pointer代替了可点击元素..这两种方式都有效，但是它更整洁，可以从ie6开始工作，我认为，即7 +肯定。

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>

Onclick从一张图像切换到两张图像，然后再切换回一张图像

1 个答案: