A Bit of help please on changing toggle button images?

Using JavaScript with Hype
1

Ok so awhile ago MaxZieb helped someone create a toggle button to dis/en-able the audio of videos that would work in Safari AND Chrome and other browsers. Here’s the original post… Well it worked GREAT, but instead of a basic generic button, I’d like to have an (image-button) with a green light display when it’s unmuted, (green.png) and a different (image-button) with a red light to take it’s place when it IS muted (red.png)… but of course to still retain it’s functionality in variable browsers.

Can MaxZieb or anyone please explain to make this happen?? Dbear had a nice image-toggle script on here awhile back, but it didn’t mute video in Chrome.

Unfortunately, I’m not an actual programmer, so I will need the full code please and direction on where to paste it. Thank you all in advance for any help. :upside_down_face:

2

Here’s how you would do it:

  1. drag the red.png to the scene to make your button
  2. Set it to use the toggleMuted() function on mouse down/click
  3. Add a Unique Element ID (in the Identity Inspector) to that button. I’ll call it “myToggleButton”
  4. drag green.png to the Resource Library so it can be used by javascript
  5. In the Resources Library, uncheck “Automatically optimize when exporting” for the red.png and green.png images
  6. Modify the toggleMuted() function in the example from @MaxZieb’s post to look like:
	var myVideo = hypeDocument.getElementById('myVideo');
	myVideo.muted = !myVideo.muted;

	var myToggleButton = hypeDocument.getElementById('myToggleButton');
	if(myVideo.muted == true) {
		hypeDocument.setElementProperty(myToggleButton, 'background-image', "${resourcesFolderName}/red.png");
	} else {
		hypeDocument.setElementProperty(myToggleButton, 'background-image', "${resourcesFolderName}/green.png");
	}
2 Likes
3

Thank you so much for your help Sir… I GREATLY appreciate it! :smile::+1:

1 Like