Question

I’m using javascript to change some settings of asp button on mouseover. It is working in IE. But not working in Firefox. Is there any other javascript code that will support almost all browsers? My code is as follows

<script type="text/javascript">
        var previousColor;
        function Changecolor() {
            previousColor = window.event.srcElement.style.backgroundColor;
            window.event.srcElement.style.backgroundColor = "Blue";
            window.event.srcElement.style.cursor = "hand";
        }
        function RestoreColor() {
            window.event.srcElement.style.backgroundColor = previousColor;
        }
</script>


<asp:Button ID="btnSearch" runat="server" BackColor="#800000" Font-Bold="True" Font-Names="Arial" onmouseover="Changecolor();" onmouseout="RestoreColor();" ForeColor="White" Height="28px" OnClick="btnSearch_Click2" Text="Search Jobz" Width="117px" />

Answer 1

Take a look at the Mozilla Developer Center docs on events. In Internet Explorer, the global event object is created when an event is fired. In standards compliant browsers, the event object is passed as the first argument of the function assigned to the firing event. If your event is defined in the HTML, the event object is created under the variable name event and can be passed to the functions you’re calling.

Also note that the event.srcElement property is IE only and most other browsers use event.target instead.

Taking this into consideration, your function should look like this:

<script>
        var previousColor; 
        function Changecolor(evt) {
            var srcEl = evt.srcElement || evt.target;
            previousColor = srcEl.style.backgroundColor; 
            srcEl.style.backgroundColor = "Blue"; 
            srcEl.style.cursor = "pointer"; 
        } 
        function RestoreColor(evt) {
            var srcEl = evt.srcElement || evt.target;
            srcEl.style.backgroundColor = previousColor; 
        } 
</script> 


<asp:Button ID="btnSearch" runat="server" BackColor="#800000" Font-Bold="True" Font-Names="Arial" onmouseover="Changecolor(event);" onmouseout="RestoreColor(event);" ForeColor="White" Height="28px" OnClick="btnSearch_Click2" Text="Search Jobz" Width="117px" />