I am doing something like this-
.asp?filename=tryhtml5_video_js_prop
but I want to replace the buttons with images that toggle to another image when clicked. In other words, the Play button will change to a Pause button.
There are many tutorials that show how to do this with only one button but as soon as I add more buttons, the new ones don't work.
Any help appreciated!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function changeIt()
{
var theImg = document.getElementsByTagName('img')[0].src;
var x = theImg.split("/");
var t = x.length-1;
var y = x[t];
if(y=='btnPlay.gif')
{
document.images.PlayOrPause.src='btnPause.gif'
}
if(y=='btnPause.gif')
{
document.images.PlayOrPause.src='btnPlay.gif'
}
}
</script>
<a href="#" onclick="changeIt()"><img src='btnPause.gif' name='PlayOrPause' border='0' /></a>
I am doing something like this-
http://www.w3schools./html5/tryit.asp?filename=tryhtml5_video_js_prop
but I want to replace the buttons with images that toggle to another image when clicked. In other words, the Play button will change to a Pause button.
There are many tutorials that show how to do this with only one button but as soon as I add more buttons, the new ones don't work.
Any help appreciated!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function changeIt()
{
var theImg = document.getElementsByTagName('img')[0].src;
var x = theImg.split("/");
var t = x.length-1;
var y = x[t];
if(y=='btnPlay.gif')
{
document.images.PlayOrPause.src='btnPause.gif'
}
if(y=='btnPause.gif')
{
document.images.PlayOrPause.src='btnPlay.gif'
}
}
</script>
<a href="#" onclick="changeIt()"><img src='btnPause.gif' name='PlayOrPause' border='0' /></a>
- 2 Can you please post some of your existing attempts for us to help you refine? SO is not for asking people to do your work for you, but we'd sure love to help you when you're truly stuck. – ashurexm Commented Mar 23, 2012 at 17:14
- use the onClick function on your images. – Reinard Commented Mar 23, 2012 at 17:16
- I updated my post with one of my attempts. I didn't include this before because I know there are many ways to achieve this effect and I don't know what method is best. The above example works but there is only one button. If I want to have several buttons, only one of them works at a time. This is where my problem lies. – Aurochs Commented Mar 23, 2012 at 17:52
2 Answers
Reset to default 4Try this using input type image
HTML
<input type="image" src="play.png" class="play" onclick="toggle(this);"/>
CSS
.play, .pause {width:100px;height:100px;}
JS
function toggle(el){
if(el.className!="pause")
{
el.src='pause.png';
el.className="pause";
}
else if(el.className=="pause")
{
el.src='play.png';
el.className="play";
}
return false;
}
A fiddle is here.
swap : function(id) {
var e = document.getElementById(id);
e.className = (e.className == 'image1')
? 'image2'
: 'image1';
}
You can just make a function that checks the current class and switches it. This is the simplest example in which the 2 classes have different background images. The rest of the logic you could handle in a different function that manages the player's 'state' of playing, paused, etc.