How would I make the 2 images switch back and forth when you click on it?

JavaScript
1

My Code: https://jsfiddle.net/b4jw7v9g/2/

<div style="width:0;" onclick="myObject=document.getElementById('myObj'); 
myObject.style.display='block'; this.style.display='none'">

<div style="margin:0 0 -24px;width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #000000 83px,#0059dd 83px, #0059dd 86px,  #000000 86px,  #000000 174px, #0059dd 174px, #0059dd 177px,  #000000 177px  );border: 3px solid #0059dd;"></div>

<button style="display:block; border:none;cursor: pointer;background-color:transparent;width:266px;height:24px;" onclick="document.getElementById('player').volume=1.0;player.play()"></button>

</div>

<div id="myObj" style="display: none;">

<div style="margin:0 0 -24px;width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  );border: 3px solid #0059dd;"></div>

<button style="display:block; border:none;cursor: pointer;background-color:transparent;width:266px;height:24px;" onclick="document.getElementById('player').volume=1.0;player.paused ? player.play() : player.pause()"></button>

</div>

<audio id="player" preload="none">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/></audio>

Pause mode:

Play Mode:
http://i.imgur.com/k4yC4JB.png

I know of this method, but I have no idea how I would implement the above code into this code format. I’m a little confused on how I would do it. https://jsfiddle.net/b4jw7v9g/4/

Some help would be greatly appreciated.

margin:0 0 -24px;
width: 260px;height:18px;
border-radius:50px;
background-image: linear-gradient ( to right, #0ff 83px,#0059dd 83px, #0059dd 86px, #fff 86px, #fff 174px, #0059dd 174px, #0059dd 177px, #f0f 177px );
border: 3px solid #0059dd;

I know this is how you do a regular background image:

playButton.style.backgroundImage = 'url(\'https://i.imgur.com/qg4rg7Z.png\')';

But I’m not using an image, I’m using, linear-gradient

<button id="playButton" style="cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:green;color:blue;padding:13px 6px " onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.innerHTML = 'Pause';
    playButton.style.backgroundColor = '#cc333f';
    playButton.style.padding = '13px 0px';
    player.play();
  } else {
    playButton.innerHTML = 'Play';
    playButton.style.backgroundColor = 'green';
     playButton.style.padding = '13px 6px';
    player.pause();
  }">
  Play</button>

<audio id="player" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>

I tried this, this doesn’t seem to work unless I’m going it wrong.

playButton.style.background = 'linear-gradient ( to right, #0ff 83px,#0059dd 83px, #0059dd 86px, #fff 86px, #fff 174px, #0059dd 174px, #0059dd 177px, #f0f 177px )';
2

I tried to edit the title to this, but it wouldn’t let me.
How would I make 2 linear-gradients switch back and forth when you click on it?

They are not images in the sense of pictures, but linear-gradients.

3

I just got up to this part.


<button id="playButton" style="display:block;margin:0 0 -24px;width: 266px;height:24px;border-radius:50px;background-image: linear-gradient(  to right,  #000000 83px,#0059dd 83px, #0059dd 86px,  #000000 86px,  #000000 174px, #0059dd 174px, #0059dd 177px,  #000000 177px  );border: 3px solid #0059dd; cursor: pointer;"
onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.innerHTML = '';
    player.play();
  } else {
    playButton.innerHTML = '';
    player.pause();
  }">
</button>

<audio id="player" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>
4

Yes! I just did it.

<button id="playButton" style="display:block;width: 266px;height:24px;border-radius:50px;background-image: linear-gradient(  to right,  #000000 83px,#0059dd 83px, #0059dd 86px,  #000000 86px,  #000000 174px, #0059dd 174px, #0059dd 177px,  #000000 177px  );border: 3px solid #0059dd; cursor: pointer;"
onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.innerHTML = '';
    playButton.style.background = 'linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  )';
    player.play();
  } else {
    playButton.innerHTML = '';
    playButton.style.background = 'linear-gradient(  to right,  #000000 83px,#0059dd 83px, #0059dd 86px,  #000000 86px,  #000000 174px, #0059dd 174px, #0059dd 177px,  #000000 177px  )';
    player.pause();
  }">
</button>

<audio id="player" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>
5

Normally CSS is the easiest way to switch images.

Here are nine CSS-based image switch techniques for you to learn from.
I recommend technique #3

1 Like
6

It looks like the reason this isn’t working is because you are declaring the var ClickedOnce inside of a function. This means that it is a local variable inside that function that will be set to 0 every time that function is called. Therefore, the same thing will happen every time it is clicked.

Try declaring some variable outside of the function.

You can try something like this:

var wasClicked = false;

document.getElementById('x').onclick = function() {
    if (!wasClicked) {
        wasClicked = true;
        return;
    }
    if (this.getAttribute("src") == 'Media/Images/Other/SwitchUP.jpg') {
        this.setAttribute("src", 'Media/Images/Other/SwitchDOWN.jpg');
    } else {
        this.setAttribute("src", 'Media/Images/Other/SwitchUP.jpg');
    }
}

Additionally, since you tagged this question with jQuery, here is a jQuery approach to it:

var wasClicked = false;

$(document).ready(function() {
    $("#x").click(function() {
        if (!wasClicked) {
            wasClicked = true;
            return;
        }
        if ($(this).attr("src") == "path/to/some/image") {
            $(this).attr("src", "path/to/other/image");
        } else {
            $(this).attr("src", "path/to/some/image");
        }
    });
});
1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.