Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

Change Button Image After Click To "loading" And Then With Another Image After 10 Seconds

Post a Comment
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/

function showLoad() {
    document.getElementById('ImageButton1').src = document.getElementById('LoadingImg').src;

    setTimeout(swapImageSrc, 1000);
}

function swapImageSrc() {
    document.getElementById('ImageButton1').src = document.getElementById('ImageButton2').src;

}​

Solution 2:

This works...

<!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=iso-8859-1" />
<title>Untitled Document</title>


<script  language="javascript">  

function showLoad() {   

 document.getElementById('ImageButton1').src = '';
 document.getElementById('LoadingImg').src = 'images/Loader.gif';
 setTimeout(swapImageSrc, 10000);
}

function swapImageSrc() {
 document.getElementById('LoadingImg').src = '';    
 document.getElementById('ImageButton2').src = 'images/getld.png';
 document.getElementById('Code1String').style.display='block';
}

</script>
</head>

<body>

<img src="images/xboxsite_14.gif" id="ImageButton1" onclick="showLoad()">
<img src="" id="ImageButton2">
<img src="" 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:

<img src="images/xboxsite_14.gif" id="ImageButton1" onClick="action();">

<script type="text/javascript" language="javascript">  

function action()
{
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"