asked on

Web: button does not change color in Firefox on mouseover

I have some procedures that change the color of buttons on mouseover – these work in the IDE (I am developing in asp.net 2.0 w VB), on IE, Safari and Chrome but NOT in Firefox…. Does anybody have an idea why ?

I am running a Master form and Content forms
Every time the Master page loads (ie every new page) this code runs:

btnHome.Attributes.Add("onMouseOver", "FlickerOnToolbar();")
btnHome.Attributes.Add("onMouseOut", "RestoreOnToolbar();")

Then in my Jscript.js file I code:

function FlickerOnToolbar()
{
window.event.srcElement.style.backgroundColor = "#F5F5F5";
window.event.srcElement.style.borderColor= "ActiveBorder";
window.event.srcElement.style.borderStyle= "none none ridge none";
window.event.srcElement.style.borderWidth="1px";
}

function RestoreOnToolbar()
{
previousColor = "White";
window.event.srcElement.style.backgroundColor = previousColor;
window.event.srcElement.style.borderColor= "White";
window.event.srcElement.style.borderStyle= "None";
}

There is no error reported, just no response.
Any idea why Firefox ignores this ??

Michel Plungjan

FX does not have window.event, you need to add (evt) and test it in the function. I'll show you when I get to a computer in a little while

Michel Plungjan

Your code is not very optimal

to fix YOUR code, one would do

function FlickerOnToolbar(evt) {
var tgt = evt?evt.target:window.event.srcElement;
tgt.style.backgroundColor = "#F5F5F5";

however this is much more elegant

<style>
.over {
  background-color:#F5F5F5; 
  border-color:ActiveBorder;
  border-style:none none ridge none;
  border-width:1px; 
}
.out {
  background-color:white; 
  border-color:white;
  border-style:none;
  border-width:1px; 
}
</style>


btnHome.Attributes.Add("onMouseOver", "FlickerOnToolbar();")
btnHome.Attributes.Add("onMouseOut", "RestoreOnToolbar();")

function FlickerOnToolbar() {
  this.className="over";
}
function RestoreOnToolbar() {
  this.className="out";      
}

Open in new window

GregoryNelson

ASKER

Still not working in Firefox !
I initially tried your 1st amendment option using:

code behind:

button1.Attributes.Add("onMouseOver", "TFlickerOnToolbar();")
button1.Attributes.Add("onMouseOut", "TRestoreOnToolbar();")

and in js:
function TFlickerOnToolbar(evt) {
var tgt = evt?evt.target:window.event.srcElement;
tgt.style.backgroundColor = "#F5F5F5";
tgt.style.borderStyle= "none none ridge none";
tgt.style.borderWidth="1px";
}
function TRestoreOnToolbar(evt) {
var tgt = evt?evt.target:window.event.srcElement;
tgt.style.backgroundColor = "White";
tgt.style.borderStyle= "None";
}

Again, none of the buttons have onmouseover 'flicker' in Firefox while all of them 'flicker' in IE & Chrome (original buttons use original procs eg FlickerOnToolbar while new Button1 uses 'TFlickerOnToolbar')

You can see this on www.silksuitsyou.CO.UK (not COM) -- pwd for entry is 'CAT'.... the new button is on the lower horizontal menu/toolbar.

I was going to use the <style> option after getting 1st fix working.

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GregoryNelson

ASKER

Excellent !!
I shall look into the CSS alternative when I can (I have avoided it all these years - rather, there never has been a calling)