ボタンを押すと画像が切り替わります

ボタンを使用して画像をgifに変更したいのですが、この部分のコードは機能しています。
しかし、今では、gifを2番目のボタン（これを停止ボタンと呼ぶ）で前の画像に戻すように頼んだ。ボタンを押すと画像が切り替わります

<script> 
function pictureChange() 
{ 
document.getElementById("theImage").src="http://www.animaties.com/data/media/194/vis-bewegende-animatie-0135.gif"; 
} 
</script> 
<body> 
<img id="theImage" src="http://www.pastasite.nl/file/2011/11/vis.jpg"> 
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange()"></p> 
</body>

画像のみたとえば、次のとおりです。ここで

は、この点に私が持っているコードです。

出典

2016-05-23 Bryan

だけelse条件

function pictureChange() { 
 
    if (document.getElementById("theImage").src == "http://www.pastasite.nl/file/2011/11/vis.jpg") { 
 
    document.getElementById("theImage").src = "http://www.animaties.com/data/media/194/vis-bewegende-animatie-0135.gif"; 
 
    } else { 
 
    document.getElementById("theImage").src = "http://www.pastasite.nl/file/2011/11/vis.jpg"; 
 
    } 
 
}

<img id="theImage" src="http://www.pastasite.nl/file/2011/11/vis.jpg"> 
 
<p> 
 
    <input type="button" id="theButton" value="click me!" onclick="pictureChange()"> 
 
</p>

データ属性の元SRC保存

出典

2016-05-23 08:39:18 Rayon

@Bryanを変更する前に、私はGLAよそれは助けて！ _Happy Coding_ – Rayon

SRC

function pictureChange() { 
 
    var elem = document.getElementById("theImage"); 
 
    if (!elem.getAttribute("data-origsrc")) { 
 
    elem.setAttribute("data-origsrc", elem.getAttribute('src')); 
 
    } 
 
    elem.src = "http://www.animaties.com/data/media/194/vis-bewegende-animatie-0135.gif"; 
 
} 
 

 
function revert() { 
 
    var elem = document.getElementById("theImage"); 
 
    elem.src = elem.getAttribute("data-origsrc"); 
 
}

<img id="theImage" src="http://www.pastasite.nl/file/2011/11/vis.jpg"> 
 
<p> 
 
    <input type="button" id="theButton" value="click me!" onclick="pictureChange()"> 
 
    <input type="button" value="stop" onclick="revert()"> 
 
</p>

出典

2016-05-23 08:47:08 anu

ボタンを押すと画像が切り替わります

答えて

関連する問題