CODEWITHSUNDEEP
javascriptasp.net
cookya
cookya

Reputation: 3297

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

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?

Upvotes: 0

Views: 90

Answers (1)

Tsahi Asher
Tsahi Asher

Reputation: 1810

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.

Upvotes: 1

Related Questions