Change Button Image After Click To "loading" And Then With Another Image After 10 Seconds
Been struggling all day with this, and I've got to the point where my code isn't working at all! What I'm trying to do is: When the user clicks ImageButton1, that image is replaced
Solution 1:
I cleaned up your logic.. http://jsfiddle.net/3ySkE/
functionshowLoad() {
document.getElementById('ImageButton1').src = document.getElementById('LoadingImg').src;
setTimeout(swapImageSrc, 1000);
}
functionswapImageSrc() {
document.getElementById('ImageButton1').src = document.getElementById('ImageButton2').src;
}
Solution 2:
This works...
<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><scriptlanguage="javascript">functionshowLoad() {
document.getElementById('ImageButton1').src = '';
document.getElementById('LoadingImg').src = 'images/Loader.gif';
setTimeout(swapImageSrc, 10000);
}
functionswapImageSrc() {
document.getElementById('LoadingImg').src = '';
document.getElementById('ImageButton2').src = 'images/getld.png';
document.getElementById('Code1String').style.display='block';
}
</script></head><body><imgsrc="images/xboxsite_14.gif"id="ImageButton1"onclick="showLoad()"><imgsrc=""id="ImageButton2"><imgsrc=""id="LoadingImg"></body></html>Solution 3:
I might be wrong of course, but could it be that this is what you are after, a cleaner code might help you debug your issue:
<imgsrc="images/xboxsite_14.gif"id="ImageButton1"onClick="action();"><scripttype="text/javascript"language="javascript">functionaction()
{
swapImage('images/getld.png') ;
window.setTimeout(function ()
{
swapImage('images/Loader.gif')
}, 1000)
};
var swapImage = function(src)
{
document.getElementById("ImageButton1").src = src;
}
</script>
Post a Comment for "Change Button Image After Click To "loading" And Then With Another Image After 10 Seconds"