Why is setting ImageUrl of ImageButton in javascript doesn't work?

Question

I'm new to asp.net. I tried to change the image of an asp.net imageButton, using this code:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Images/blueButton.png" Width="137px" Height="34px" onmouseover="this.ImageUrl='/Images/greenButton.png'" onmouseout="this.ImageUrl='/Images/blueButton.png"/>

It didn't work. However, the following code did work:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Images/blueButton.png" Width="137px" Height="34px" 
    onmouseover="this.src='/Images/greenButton.png'" onmouseout="this.src='/Images/blueButton.png"/>

As you can see, I was using src instead of ImageUrl.

Why didn't the first one work?

Tsahi Asher · Accepted Answer · 2016-11-16 09:05:17Z

1

You are mixing server and client code. JavaScript runs on the client, and your <asp:ImageButton> runs on the server. These are two separate domains.

ASP.NET renders the <asp:ImageButton> as an HTML <img src="/Images/blueButton.png"> on the server and sends it to the client, and then the mouse event can access it's DOM property named src at the client.

Look at the HTML source from your browser to see the difference between what you wrote in your ASPX file and the HTML the browser receives.

answered Nov 16, 2016 at 9:05

Tsahi Asher

1,83417 silver badges30 bronze badges

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

2 Comments

cookya Over a year ago

Thanks. Actually, the <asp:ImageButton> is rendered to <input type="image" src="/Images/blueButton.png"> and not to <img src="/Images/blueButton.png">

Tsahi Asher Over a year ago

I didn't check that, @cookya, I wanted to post a quick and easy answer, so I made an educated guess here. Didn't miss by much.

Collectives™ on Stack Overflow

Why is setting ImageUrl of ImageButton in javascript doesn't work?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related