One ASP.Net ImageButton does not work in Chrome (but the other is ... and both work in IE 9)

Question

One of my image buttons doesn't work in Chrome, but the other button (they both work in IE 9):

Does not work

<asp:ImageButton ID="lblCustomer" ImageUrl="~/images/Customer.jpg" runat="server" onmouseover="this.src='images/Customer.jpg';" onmouseout="this.src='images/Customer.jpg';" AlternateText="Customer" CausesValidation="false" OnClick="ibtnCustomer_Click" ToolTip="Customer" /> 

Work:

 <asp:ImageButton ID="ibtnUnRegisteredVendor" ImageUrl="images/VendorButton.jpg" runat="server" onmouseover="this.src='images/VendorButtonHover.jpg';" onmouseout="this.src='images/VendorButton.jpg';" AlternateText="Vendor" CausesValidation="false" OnClick="btnUnRegisteredProvider_Click" ToolTip="" /> 

The Client button is not available in Chrome.
Any idea why the Client button won't work in Chrome?

Update:

Submitted HTML from Chrome:

 <div id="Customer" style="width: 100%; left: 5px;"> <input type="image" name="Master$cphMainContent$lblCustomer" id="cphMainContent_lblCustomer" title="Customer" onmouseover="this.src=&#39;images/Customer.jpg&#39;;" onmouseout="this.src=&#39;images/Customer.jpg&#39;;" src="images/Customer.jpg" alt="Customer" /> </div> <div id="VendorsButton"> <input type="image" name="Master$cphMainContent$ibtnVendor" id="cphMainContent_ibtnVendor" title="Vendor log in, registration or access without registration" onmouseover="this.src=&#39;images/VendorsButtonHover.jpg&#39;;" onmouseout="this.src=&#39;images/VendorsButton.jpg&#39;;" src="images/VendorsButton.jpg" alt="Vendors" /> <div id="VendorFeaturesContainer"> 

Answer 1

Probably because you have a different path to both. Try changing the first ImageUrl to "images/Customer.jpg"

Answer 2

If the previous sentence did not work, you may have problems with the ~ / shortcut in the virtual directory

Answer 3

When the control (asp: ImageButton) is part of the "content placeholder" for the ASPX main page, .. / and ~ / are interpreted differently by IE11 and Chrome.

IE will respond, as expected, with the prefix ~ / to represent the root directory of the web application. IE is looking for a catalog of images (ImageUrl = "~ / images / Customer.jpg") one level below the root.

In Chrome, the file inserted in the main page will react as expected when using the .. / prefix when your images are in the directory at the same level as your “ASPX content file”. Chrome interprets ~ / in the same directory as the ".aspx content file". That is, Chrome looks for your image directory as a subdirectory of the directory where your "ASPX content file" is located.

As far as I know, asp: ImageButton is not amenable to javascript function. One of the workarounds is to create two image directories (where IE expects and where Chrome expects) with the corresponding jpg, png, gif, and other files.