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

So what is the problem? I tested your code and it is working... is there something missing? Please post what is actually happening and what you are expecting to happen. — Kelsey
– Kelsey, Commented Sep 18, 2010 at 15:08

Kelsey · Accepted Answer · 2010-09-18 16:24:33Z

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

Vinay B R · Accepted Answer · 2010-09-18 15:10:54Z

0

Try setting EnableViewState="false" on the ImageButton

answered Sep 18, 2010 at 15:10

Vinay B R

8,4913 gold badges33 silver badges45 bronze badges

Comments

Sandy · Accepted Answer · 2010-09-18 15:16:13Z

0

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

}

answered Sep 18, 2010 at 15:16

Sandy

8627 silver badges12 bronze badges

3 Comments

Aristos Over a year ago

this is going to be lost on post back.

Sandy Over a year ago

@Aristos: thats true but just given him the alternative that how it can be done in javascript. Same logic can be apply at server side.

Kelsey Over a year ago

and @Aristos I have tested the OPs code and it works and running server side so I am not sure what his actual problem is so there is nothing here to solve from what I can tell.

Collectives™ on Stack Overflow

change image url when click image button

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related