Will this jscript run inside a .ASCX page?!

Question

Will this run inside an ASCX file in my ASP.Net project? I can't seem to get it to work, just wondered if there was some particular thing missing? Do i need to include "runat="server""?

<!--[if lte IE 6]>
<script type="text/javascript">

    window.onload = function() {

        var images = document.getElementById("GetQuote").getAttribute("ImageUrl");

        for (var i = 0; i < images.length; i++) {

            var image_png_src = images[i].src;
            var image_gif_src = image_png_src.replace(".png", ".gif");
            images[i].src = image_gif_src;
        }
    };
</script>
<![endif]-->

Answer 1

You don't need a runat="server" because this is code that will run on the client. It should work, but maybe you are having problems because you are referencing IDs on items that are asp.net controls? This would mean that your ID values would not match. If so you could solve this by using control.ClientID redndered into the JavaScript server-side to make them match.

Answer 2

It appears that this JavaScript function is attempting to reference ASP.NET web control properties, which are not accessible from the client side. You can, however, reference the HTML entities that are output to the page by ASP.NET, along with their attributes.

Assuming your JavaScript code is code within the .ascx code, change this line:

var images = document.getElementById("GetQuote").getAttribute("ImageUrl");

To this:

var images = document.getElementById('<%=GetQuote.ClientID%>').getAttribute("src");

What this does is insert the client ID that ASP.NET creates for the GetQuote Image control so that it can be referenced from the client side. It also references the proper attribute of the HTML img element (src) that corresponds to the ImageUrl property of the server side Image control.

EDIT: I noticed after seeing TheVillageIdiot's response (and reading your code a bit more closely, which I should have done initially) that you are trying to use the images variable as an array. It appears that you may be trying to match several image elements that contain the text "GetQuote" in their IDs (like GetQuote1, GetQuote2, etc.).

Assuming that you need to do this on the client side, and that you are not using a framework like jQuery, try this:

window.onload = function() 
{        
    // get all img elements on the page and load them into an array
    var images = document.getElementsByTagName("img");

    // iterate through the image array
    for (var i = 0; i < images.length; i++) 
    {
        // check that the current image's id contains "GetQuote" (case sensitive)
        if (images[i].id.indexOf("GetQuote") >= 0)
        {
            var image_png_src = images[i].src;
            var image_gif_src = image_png_src.replace(".png", ".gif");
            images[i].src = image_gif_src;
        }
    }
};

Answer 3

If GetQuote is an aspx element then you need to replace it with <%= GetQuote.ClientID %> and ImageUrl with src like

 var images = document.getElementById('<%=GetQuote.ClientID%>')
                                 .getAttribute("src");

Also images should be one string not an array of strings so your loop is also at fault. Try this one instead:

var image = document.getElementById('<%=GetQuote.ClientID%>').

if(images){
      var src = image.GetAttribute("src");
      image.SetAttribute("src",src.replace(".png", ".gif");
}