mouseover event

[Wayne C.]

I had a request to highlight some fields on a screen when the mouse/cursor hovers over. I tried using the following script in the mouseover event in 2 fields on a random screen rendering.

script: document.getElementById("I_8_21").style.backgroundColor = "red"; (I've hard coded the field Id's in this case but I will convert the script to a function at some time so I can pass Id's as parameters.)

It only works if I "click" on the field. Or if I tab from field to field using the tab key. The original background color is restored when I move the cursor outside the field. Is there something I'm missing? The cursor does change to crosshair when the mouse goes over the fields. This is not an emergency but this feature may come in handy down the road. Thanks for any help.

[Scott Klement]

Wayne, I tried this and it worked fine. I did the following:

onmouseover event:

Code: Select all

getObj("I_18_7").style.backgroundColor="red"

onmouseout event:

Code: Select all

getObj("I_18_7").style.backgroundColor="white"

Note: getObj() is just a shortcut for document.getElementById()

As expected, it changes the background color to red when the mouse is over the field, and changes it back to white when the mouse is not.

Possibly the problem is tht you have "script:" in front of yours. That normally is used for a property that takes a value to tell it the data is JavaScript to be run, rather than a character string. Since the "onXXX" events are ALWAYS javascript, you never code "script:" in them. I can't see how clicking the field or tabbing to it would work around that problem, though? That doesn't make much sense. But, in my tests, it worked fine with the code above.

[Wayne C.]

Thanks Scott for the code.

I've got 3 fields that I made the change for. One's an output field and 2 are input fields. The code works wonderfully for the output field and the input field that has the cursor located in that field. The input field that DOES NOT have the cursor located in itself seems to be unaffected by the code... unless I tab to that field, in which case the mouseover code works perfectly.

[Scott Klement]

I think by default, these widgets have the "input" CSS class on them. This CSS class sets a background image to give the field a certain look.

Since background images take precedence over background colors, you won't see the mouseover effect.

When you put focus in a field (i.e., tab to it or click on it) it applies a different CSS class to make it stand out that the cursor is in the field. It looks like this replaces the input class -- that's why the mouseover works when you tab to it.

Try using the visual designer to remove the "input" class from the widget. Does your mouseover work now?

[Scott Klement]

Maybe an easier workaround than removing the input class is just to remove the image in the onmouseover event. For example, set your onmouseover to this:

Code: Select all

getObj("I_18_12").style.backgroundColor="red";
getObj("I_18_12").style.backgroundImage="none";

[Wayne C.]

Thanks Scott. This morning, I tried your second suggestion and that worked like a charm! I may try your first suggestion just so I can get a better lay of the land.

Thanks again.