0

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);

   } 
2
Contributors
2
Replies
15
Views
4 Years
Discussion Span
Last Post by RT00220489
0

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";
1

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

Thank you so much !! :)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.