asp.net expandable image

Question

I have an image which is too big so by default I want it to be hidden and instead, display something like a "+" sign on the page. toggle that sign will show/hide the image. Which component in asp.net can achieve this? I did not find anything in the VS 2010 Toolbox.

Answer 1

Don't think there is anything built in to do this. My first thought would be to use a LinkButton and have it's onclickEvent show the picture. To give you an idea:

Aspx page:

<asp:LinkButton id="btn_ToggleImage" Text="+" runat="sever" OnClick="btn_ToggleImage_Click" />
<asp:Image id="img_Prod" runat="server" Visible="false" Source="blah" />

Code behind:

btn_ToggleImage_Click(object Sender, EventArgs e)
{
    img_Prod.Visible = !img_Prod.Visible;
    btn_ToggleImage.Text = btn_ToggleImage.Text == "+" ? "-" : "+";
}

If you are interested in using jQuery you could probably do something MUCH cooler than this though...

If jQuery is an option start here:

• http://api.jquery.com/category/effects/
• http://api.jquery.com/show/
• http://api.jquery.com/animate/

Answer 2

There is no component in asp.net that can do this. You will have to write some javascript to achieve this functionality. You can also do it using code behind - render image button with plus image and on click, replace image url from plus image to original image.