是切换上点击

自己的形象制作JS按钮我做这样的事情这 -是切换上点击

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_js_prop

，但我想，单击时切换到另一个图像的图像替换按钮。换句话说，播放按钮将变为暂停按钮。

有很多教程显示如何使用只有一个按钮来做到这一点，但只要我添加更多的按钮，新的按钮不起作用。

任何帮助表示赞赏！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/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>

来源

2012-03-23 Aurochs

您可以发布一些您现有的尝试，以帮助我们改进吗？ SO并不是要求人们为你做你的工作，但是当你真的陷入困境时，我们一定会很乐意帮助你。 – ashurexm 2012-03-23 17:14:47

在图像上使用onClick函数。 – Reinard 2012-03-23 17:16:35

我用我的一次尝试更新了我的帖子。之前我没有包括这个，因为我知道有很多方法可以达到这个效果，我不知道什么方法是最好的。上面的例子工作，但只有一个按钮。如果我想要有几个按钮，一次只能有一个按钮。这是我的问题所在。 – Aurochs 2012-03-23 17:52:31

试试这个使用输入型图像

HTML

<input type="image" src="play.png" class="play" onclick="toggle(this);"/>

CSS

.play, .pause {width:100px;height:100px;}

个

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; 
}

甲小提琴是here。

来源

2012-03-23 17:54:02

请在这里查看这个小改动，http：//jsfiddle.net/JPWCQ/3/。 – 2012-03-23 18:01:52

太棒了！现在，如果我真的想要按钮控制一个视频，我会在这里添加这个吗？ onclick =“toggle（this）;”playPause（）“/> – Aurochs 2012-03-23 18:02:57

是的，你可以只添加尽可能多的按钮 – 2012-03-23 18:06:16

swap : function(id) { 
    var e = document.getElementById(id); 
    e.className = (e.className == 'image1') 
     ? 'image2' 
     : 'image1';   
}

你可以只是使检查当前类和它切换功能。这是两个类别具有不同背景图像的最简单示例。你可以在管理球员的演奏“国家”不同的功能处理逻辑的休息，暂停等

来源

2012-03-23 17:18:54 grep

是切换上点击

回答

相关问题