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

【问题标题】：Onclick switch from one to two images then back to oneOnclick 从一张图像切换到两张图像，然后再切换回一张
【发布时间】：2012-08-12 09:16:58
【问题描述】：

试图弄清楚如何从一张图像切换到两张图像，然后再用一个 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>

【问题讨论】：

标签： javascript html function onclick image

【解决方案1】：

这应该可以正常工作，除了从 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>

【讨论】：

我发布的代码没有任何错误，因为它按预期工作，在点击时将一张图像切换为另一张图像。扫描是针对是否正在播放音频 id（播放）标签。我试图让它给两个图像显示onclick（例如pause.png + another.png），然后下一个onclick回到单个play.png。
好酷...有几种方法可以做到这一点，但我会更新我的答案以展示一种快速简便的方法来预加载图像，您甚至可以在以后添加效果
感谢 cursor=pointer 样式提示。我是新手，正在寻找一种方法来摆脱状态栏中显示的“javascript:void(0)”，这成功了。
好的，现在检查回复，这是多种方法之一.. 使用附加图像，您可以在按钮 div 内执行我所拥有的操作，尽管这使它也可以点击，我'我不确定你是否想要那个。如果你不使用 jQuery，我发现自己希望我拥有它，即使是为了它的价值......让一切变得简单
非常感谢。这就是我一直在寻找的。我是新手，也许很快我会使用 jQuery 进行检查。很高兴你能帮上忙。