ASP.NET button mouseover image change in javascript

The story so far: I wanted to do something very simple. I have a web-site that needs multi language capabilities so, I store all my site text in a database and pull it out using the country code of the client browser. This means for example that I could have a button with "About" in English and "A Propos" in French. I also wanted a mouseover effect for my buttons to provide a little bit of visual feedback so I created button background slices with appropriate blank backgrounds with the intention of updating the button text in the manner mentioned above.


Well. An ASP.Net image button does the mouseover just fine but not the text. It can't have text. With a little bit of cajoling one can make the ASP.net Button control have a background so that one can indeed update the text. The problem was that there seems to be no way in the world to make the mouseover behaviour work with the Button control. Not using Framework 4.0 anyways.


Microsoft recently modified the way attribute encoding is done in Framework 4.0. This means that if you if you put something like:

onmouseover="alert('boo!')

The 4.0 framework however encodes this as:

onmouseover="alert(&#39boo!&#39)"

I have no clue why but if you start the web project as framework 4.0 and use javascript inline, the server falls over at the encoded apostrophes. If however you switch to framework 3.5 and then back to 4.0 again, something magic happens and the javascript sees the &#39 as an apostrophe.

In order to make my ASP.Net Button control with image background mouseover behaviour work correctly, here's what I did:

#1 Switch the project to framework 3.5 then back to Framework 4.0 
#2 Declare your button:
<asp:Button ID="AboutButton"

Style="background-image:url('images/aboutoff1.jpg'); text-align:left; background-color:Transparent; cursor:hand; background-repeat:no-repeat; background-position:left; font-family:Verdana, Sans-Serif; font-size:28pt; font-weight:bolder;"

Runat="server"

Height="53px"

BorderStyle="None"

Text="About"

Width="352px"

#3 declare your mouseover behaviour in javascript
onmouseover="document.getElementById('ctl00_AboutButton').style.backgroundImage='url(images/aboutover.jpg)';"
onmouseout="document.getElementById('ctl00_AboutButton').style.backgroundImage='url(images/aboutoff.jpg)';"/>

Summary
Traditionally, asp.net controls have been a bit closed but relatively easy to coerce. A bit of wc3 compliant Javascript helps out enormously when the ASP control of choice needs a tweak. Ok, one could roll up one's sleeves and write an ASP.net custom control and render the HTML yourself with no problem but it so much easier to mix and match ASP and javascript.