change Image source using Javascript in ASP.NET

[RT00220489]

Hi,

My question goes as follows :

I need to replace an existing image, with another one, but without using jquery ie using javascript and using the id of the image as it is <asp:Image> tag and hence does not support name. The image supports the functionality of toggling the text as menu but image replacement is not happening. Kindly help.. Please !!

My code in user control is :

<tr>
                    <td nowrap="nowrap">
                    <div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' onclick='visible(<%# DataBinder.Eval(Container, "ItemIndex") %>);'>
                    <asp:Image ID="ArrowImageButton" runat="server" ImageUrl="~/images/downarrow.png"/>
                    <%# DataBinder.Eval(Container.DataItem, "Header") %>

                    </td>
               </tr>

and the javascript I am trying is :

 <script type="text/javascript">

        function visible(id) {
            var e = document.getElementById(id);
            if (e.style.display == 'block' || e.style.display == '') {
                e.style.display = 'none';
                if (id == 0) {
                    //$('#ctl00_SiteNevigation1_rptConsoleItem_ctl01_ArrowImageButton').attr('src', "../Images/rightarrow.png");
                    document.getElementById('ArrowImageButton').src == "../Images/rightarrow.png";

                }
                else if (id == 1) {
                    //$('#ctl00_SiteNevigation1_rptConsoleItem_ctl02_ArrowImageButton').attr('src', "../Images/ArrowToRight.png");
                    document.getElementById('ArrowImageButton').src == "../Images/rightarrow.png";
                }
                //});
            }
            else {
                e.style.display = 'block';
                if (id == 0) {
                    //$('#ctl00_SiteNevigation1_rptConsoleItem_ctl01_ArrowImageButton').attr('src', "../Images/down-arrow.png");
                    document.getElementById('ArrowImageButton').src == "../Images//downarrow.png";
                }
                else if (id == 1) {
                    //$('#ctl00_SiteNevigation1_rptConsoleItem_ctl02_ArrowImageButton').attr('src', "../Images/down-arrow.png");
                    document.getElementById('ArrowImageButton').src == "../Images//downarrow.png";

                }
            }


//            var img = document.createElement('asp:Image');
//            img.src = "~/images/rightarrow.png";
//            var oldImg = document.getElementById(id);
//            document.getElementById('h<%# DataBinder.Eval(Container, "ItemIndex") %>').replaceChild(img, oldImg);

   } 

[JorgeM]

To make it easier to bind to the image element, on the asp net web control, add the attribute ClientIDMode="Static".

Then this should work.. (With one equal sign)

  document.getElementById('ArrowImageButton').src = "../Images/rightarrow.png";

[RT00220489]

Thanx a lot Jorge !! It works now.. I just changed to setAttribute("src","Path") instead of .src !! :)

Thank you so much !! :)