是切換上點擊

自己的形象製作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

是切換上點擊

回答

相關問題