showing a loading image when ajax start running in background

Question

I have the following script which starts running when i click on record button . I want to show a image when i click on record button which is same as the one displayed usually when we upload images on... this is the script:

<script>
function st()
{
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        alert('RECORDING Start');
        }

    }
    xmlhttp.open('GET','http://localhost/IPCAM/start.php;)

    xmlhttp.send();

setTimeout('st()',5000);
}
</script> 

And this the button when i click on this button the ajax starts background.

<button OnClick="st()">Record</button>

I have no Idea to do this please can someone help me .

Answer 1

To begin with I find your question very unclear, but let me try:

Make sure that you have a css class that defines the image:

.recordingBackground
{
    background-image: url("record.png");
}

(Or just use javascript)

Create the button:

<input type="button" id="recordButton" value="Record" />

Make jQuery listen to the button and you can add the class to the element:

$('#recordButton').live("click", function()
{
    $('#background').addClass('recordingBackground');
    // Or use a similar method (for example: pure javascript).
    // #background is just an example div.
});

Answer 2

Add a div with id loadingDiv and change your code to this

<script>
function st()
{
                        if (window.XMLHttpRequest)
                        {
                            xmlhttp=new XMLHttpRequest();
                        }
                        else
                        {
                            xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
                        }
                        xmlhttp.onreadystatechange=function()
                        {
                            if (xmlhttp.readyState==1)
                            {
                            document.getElementById("loadingDiv").innerHTML = "<img src='loading.gif'/>";
                            }
                            if (xmlhttp.readyState==4 && xmlhttp.status==200)
                            {
                            alert('RECORDING Start');
                            }

                        }
                        xmlhttp.open('GET','http://localhost/IPCAM/start.php;

                        xmlhttp.send();

setTimeout('st()',5000);
}
</script>