Change Button to Image Navigation Slider Javascript

Question

I found a tutorial about create a simple slideshow with JavaScript. So i try it and it was success. But the navigation is in button type for Play/Stop.

I want to change it to an image navigation called play and another image called stop. When i click on play image, image stop will appear and play image will be hidden. And when i click stop image, play image will appear and stop image will stop.

Here is my JavaScript:

var interval = 2000; // You can change this value to your desired speed. The value is in milliseconds, so if you want to advance a slide every 5 seconds, set this to 5000.
    var switching = setInterval("toggleSlide(true)", interval);

    window.paused = false;

    function toggleInterval() {
        var button = document.getElementById("pauseButton");
        if(!window.paused) {
            clearInterval(switching);
            button.value = "Resume";
        } else {
            switching = setInterval("toggleSlide(true)", interval);
            button.value = "Pause";
        }
        window.paused = !(window.paused);
    }

And here is my HTML (First):

<div align="right">
    <input id="pauseButton" onclick="toggleInterval()" type="button" value="Pause" />
</div>

And this is my HTML now:

<div align="right">
    <img src="../asset/images/play.png" title="Play" id="pauseButton" onclick="toggleInterval()" />
    <img src="../asset/images/stop.png" style="cursor:pointer; display:none;" title="Stop" onclick="toggleinterval(true)" />
</div>

Thanks for the answer

Answer 1

Instead of having img element in your button , you can work with classes and background-image css. It's easier to manage afterwards, you simply set the class you need and the image will change according to this. Something like this allows you to switch images easily:

 window.paused = true; // You can keep the same logic as with your button // but instead of changing value, you change the class // And in your css you assign different images to different classes function toggleInterval() { var button = document.getElementById("pauseButton"); if (!window.paused) { button.className = 'resume'; } else { button.className = 'pause'; } window.paused = !(window.paused); } 

 #pauseButton { width: 100px; height: 100px; background-size: contain; } #pauseButton.pause { background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqDrugj4g4aPOBxEXi7zv1zH_c1OXaaWbOg8HRkQuVDhb8LVn46PP8wTo') } #pauseButton.resume { background-image: url('https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg') } 

 <div> <div id="pauseButton" class="resume" onclick="toggleInterval()"></div> </div> 

Answer 2

A simple trick

Set the pause tag to display: block; and put it to the back

<div align="right">
    <img src="../asset/images/play.png" style="position: relative; z-index: 1;" title="Play" id="pauseButton" onclick="toggleInterval()" />
    <img src="../asset/images/stop.png" style="position: absolute; z-index: 0;" title="Stop" onclick="toggleinterval(true)" />
</div> 

And remove opacity from Play when you click it.

function toggleInterval() {
    var button = document.getElementById("pauseButton");
    if(!window.paused) {
        clearInterval(switching);
        button.value = "Resume";
        //here is the trick
        button.style.opacity = 1;
    } else {
        switching = setInterval("toggleSlide(true)", interval);
        button.value = "Pause";
        //here is the trick
        button.style.opacity = 0;
    }
    window.paused = !(window.paused);
}