Home/ Questions/Q 8377073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T15:34:29+00:00

Trying to figure out how to switch from one to two images then back

  • 0

Trying to figure out how to switch from one to two images then back to one with an onlick.

So far I have below which works no problem for switching to one image and back to original image. Ultimately I’m trying to get the first onclick event to be two images vertically and then click again back to the first single image.

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();
        }
    }

and in body:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should work fine except, take out the width, height and border from the javascript, they’re not changing so why have it there and risk some browsers freaking out on them?

    I just put this together real quick to test and it works a treat.. I’ve commented out scan.play and pause of course but I’m assuming you’ve checked the console in your browser to see if those are throwing any errors?

    I took the <a> out and used style cursor=pointer instead for the click-able element as well.. either way works but this is neater and works from ie6 I think, ie7+ definately.

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

    After discussion in comment there’s heaps of ways to do it, and I’d probably use jQuery but since you’re not here’s one not

    <!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>
    • 0