0

试图弄清楚如何从一张图像切换到两张图像，然后再通过 onlick 切换回一张。

到目前为止，我在下面有切换到一个图像并返回到原始图像的问题。最终，我试图让第一个 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>
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 回答