Replace image url in ASP.NET image button using JQuery?

Question

I am working in asp.net and mysql. Will shows the details of rooms in page with images that getting for mysql database,. In the Main Image will change when i click the small size image buttons.

I want to replace the Image1 ImageUrl "~/GetRoomImage.aspx?id=1" to "~/GetRoomImage.aspx?id=2" or "~/GetRoomImage.aspx?id=3" like this,. when clicking the regading imagebutton.

Please help me to get this in Jquery.

enter image description here

My Code,..

<asp:Image ID="Image1" runat="server" ImageUrl="~/GetRoomImage.aspx?id=1" Height="178" Width="178"></asp:Image>   <br /><br />
                      &nbsp;
                     <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/GetRoomImage.aspx?id=2" Height="30" Width="37" /> &nbsp;
                     <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/GetRoomImage.aspx?id=3" Height="30" Width="37" />&nbsp;
                     <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/GetRoomImage.aspx?id=4" Height="30" Width="37" />&nbsp;
                     <asp:ImageButton ID="ImageButton5" runat="server" ImageUrl="~/GetRoomImage.aspx?id=5" Height="30" Width="37" />

Hary · Accepted Answer · 2013-01-10 06:42:46Z

1

you can bind an event for every small image click on page load and assigning the src from the small image to larger image.

$(document).ready(function(){
      $('input[type=image]').click(function(){

          var newImg = $(this).attr("src");
           $("#Image1").attr("src",newImg)
       });
});

edited Jan 10, 2013 at 6:42

answered Jan 10, 2013 at 6:10

Hary

5,8368 gold badges49 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sagotharan Over a year ago

I am not using html image, how to change the imageurl in asp. pls note my req. thanks

Hary Over a year ago

ASP.NET server controls will be rendered as html controls in browser, so <asp:ImageButton> will be rendered as input[type=image]. See my updated answer

atredis · Accepted Answer · 2013-01-10 06:15:26Z

0

Try this

$(document).ready(function(){
  $("[value ^= 'ImageButton']").click(function(){
      var newImg = $(this).attr("src");
       $("#Image1").attr("src",newImg)
   });
});

answered Jan 10, 2013 at 6:15

atredis

3822 silver badges10 bronze badges

1 Comment

Sagotharan Over a year ago

can i change the src to ImageUrl. bzs i am using asp image

Collectives™ on Stack Overflow

Replace image url in ASP.NET image button using JQuery?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related