Jump to content
Sign in to follow this  
SerenityNetworks

Toggle Image

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

Share this post


Link to post
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';
  }
}

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...