change image url when click image button

Question

I had three image buttons they had default image url and I tried to change image url when user click on any image button and the default retrieve when user click to other image button tried to do that but I did not

<aspx>
<div class="hom_but_sa hom_but_saR">
    <asp:ImageButton ID="BTNPromotion" ImageUrl="images/home-bu_npro.jpg"
        runat="server" Width="134" Height="34" border="0"
        OnClick="BTNPromotion_Click" />
</div>
<div class="hom_but_a hom_but_sbR">
    <asp:ImageButton ID="BTNNewProduct" ImageUrl="images/home-bu_pro.jpg"
        runat="server" Width="134" Height="34" border="0" 
        OnClick="BTNNewProduct_Click" />
</div>
<div class="hom_but_a">
    <asp:ImageButton ID="BTNEvent" runat="server" ImageUrl="images/home-bu_news.jpg"
        Width="134" Height="34" border="0" OnClick="BTNEvent_Click" />
</div>
</div>

<cs>
protected void BTNEvent_Click(object sender, ImageClickEventArgs e)
{        
    BTNEvent.ImageUrl = "images/home-bu_news.jpg";      
}
protected void BTNNewProduct_Click(object sender, ImageClickEventArgs e)
{
    BTNNewProduct.ImageUrl = "images/home-bu_pro_r.jpg";
}
protected void BTNPromotion_Click(object sender, ImageClickEventArgs e)
{     
    BTNPromotion.ImageUrl = "images/home-bu_npro_r.jpg";
}

Answer 1

Try setting EnableViewState="false" on the ImageButton

Answer 2

This can be easily achieved by Javascript. Call below function on onclick event of all three buttons, please check the code below,

function imageurl(id)
{
//assuming image button ids as test1,test2,test3

 switch(id)
 {
    case 'test1':
       document.getElementById('test1').href = 'test1newurl';
       document.getElementById('test2').href = 'test2oldurl';
       document.getElementById('test3').href = 'test3oldurl';
    break;

    case 'test1':
       document.getElementById('test1').href = 'test1oldurl';
       document.getElementById('test2').href = 'test2newurl';
       document.getElementById('test3').href = 'test3oldurl';
    break;

    case 'test1':
       document.getElementById('test1').href = 'test1oldurl';
       document.getElementById('test2').href = 'test2oldurl';
       document.getElementById('test3').href = 'test3newurl';
    break;
 }

}

Answer 3

As per my comments I am not sure what you actual problem is but maybe you want some sort of toggle like this?

protected void BTNEvent_Click(object sender, ImageClickEventArgs e) 
{         
    BTNEvent.ImageUrl = "images/home-bu_news_r.jpg";
    BTNNewProduct.ImageUrl = "images/home-bu_pro.jpg"; 
    BTNPromotion.ImageUrl = "images/home-bu_npro.jpg"; 
} 
protected void BTNNewProduct_Click(object sender, ImageClickEventArgs e) 
{ 
    BTNEvent.ImageUrl = "images/home-bu_news.jpg";
    BTNNewProduct.ImageUrl = "images/home-bu_pro_r.jpg"; 
    BTNPromotion.ImageUrl = "images/home-bu_npro.jpg"; 

} 
protected void BTNPromotion_Click(object sender, ImageClickEventArgs e) 
{      
    BTNEvent.ImageUrl = "images/home-bu_news.jpg";
    BTNNewProduct.ImageUrl = "images/home-bu_pro.jpg"; 
    BTNPromotion.ImageUrl = "images/home-bu_npro_r.jpg"; 
} 

A cleaner way would be to just have one click event handle it by attaching one event to all the ImageButton OnClick:

OnClick="BTN_Click"

Then implement the Click like:

protected void BTN_Click(object sender, ImageClickEventArgs e)
{
    ImageButton btn = (ImageButton)(sender);
    BTNEvent.ImageUrl = (btn.ID.Equals("BTNEvent")) ? 
        "images/home-bu_news_r.jpg" : "images/home-bu_news.jpg";
    BTNNewProduct.ImageUrl = (btn.ID.Equals("BTNNewProduct")) ?
        "images/home-bu_pro_r.jpg" : "images/home-bu_pro.jpg";
    BTNPromotion.ImageUrl = (btn.ID.Equals("BTNPromotion")) ?
        "images/home-bu_npro_r.jpg" : "images/home-bu_npro.jpg";
}