Jump to content

Toggle Image


SerenityNetworks

Recommended Posts

I have an image I use to toggle between playing a video and pausing the video. The image also employs hover controls to highlight the image when the mouse is over it.

<a onclick="playPause();" >
   <img id='hoverPlayPause' class="hover2" src="images/play_transparent.png" alt="Play/Pause" 
   onmouseover="onHoverPlayPause();" onmouseout="offHoverPlayPause();" />
</a>

The image link calls the following functions and styles.

function playPause() { //vCurrentTime = vid.currentTime;
    if (vvid.paused) 
        {vvid.play(); 
         speed2(1.00);
		setInterv();
		findWord(jQuery('#findWord').val());
        }
    else 
        {
        vvid.pause();
        clearInterv();
        } }

function onHoverPlayPause()  { $("#hoverPlayPause").attr('src', 'images/play_transparent.png'); }
function offHoverPlayPause() { $("#hoverPlayPause").attr('src', 'images/play_transparent.png'); }

<style>
.hover2 {                     /* Slower, Back, Play/Pause, Forward, Faster buttons */
    width: 30px;
    height: 25px;
    margin-bottom:10px;
    border:medium;
    border-color:black;
    border-style:solid;
    padding:2px;
}
.hover2:hover {                /* Slower, Back, Play/Pause, Forward, Faster buttons */
    background-color: #4CAF50; /* green */
    width: 30px;
    height: 25px;
    margin-bottom:10px;
    border:medium;
    border-color:black;
    border-style:solid;
    padding:2px;
}
</style>

I'd like to toggle the image between the (current) "play_transparent.png" image and a "pause_transparent.png" image, so the "pause_transparent.png" image displays while the video is playing and the "play_transparent.png" image displays while the video is paused. I've been unsuccessful in getting it to happen.

 

I'm a hobbyist and can muddle my way through code somewhat, but I'm not a developer. I would appreciate assistance with the code to make the play/pause image toggle work.

 

Thanks in advance,

Andrew

Edited by SerenityNetworks
Link to comment
Share on other sites

I'd start off by simplifying the HTML:

<a id="play-button"><img class="hover2" src="images/play_transparent.png" alt="Play/Pause"></a>

Leave all the event handling to Javascript.

 

I don't know where the variable vvid is set, but if you're depending on it to exist without having declared it yourself (for example, "vvid" is the id attirbute of an element) then your code is not likely to work in all environments.

If vvid is just an attribute, then set it in the code:

var vvid = document.getElementById("vvid");

I don't know what all these functions do so I'll have to leave them as is but I'm pretty sure this code could be optimized further.

  • speed2
  • setInterv
  • findWord
  • clearInterv

So here's the code rewritten to change the image when the video is started or stopped:

var button = document.getElementById("play-button");
var img = button.getElementsByTagName("img")[0];
var wordElement = document.getElementById("findWord");

button.addEventListener("click", playPause, false);

function playPause() {
  // Assuming vvid was set somewhere else in the code.
  if (vvid.paused) {

    // Unknown code
    vvid.play(); 
    speed2(1.00);
    setInterv();
    findWord(wordElement.value);

    // Change the image
    img.src = 'images/play_transparent.png';
  } else {
    
    // Unknown code
    vvid.pause();
    clearInterv();

    // Change the image
    img.src = 'images/pause_transparent.png';
  }
}
Link to comment
Share on other sites

Perfect! Thank you.

 

Yes, vvid is an attribute and I had already set it in the code. It took me a little bit to digest and test, but I see what you are doing. I'll be able to apply this to several other buttons on the page.

 

 

...but I'm pretty sure this code could be optimized further.

 

Ha! No doubt about that point. I'm quite sure there are many optimizations on the page that could be made. But the page works and it would be a bit much to ask someone to go through it all and optimize the content.

 

Thank you very much for the help and instruction.

 

Andrew

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...