PDA

Click to See Complete Forum and Search --> : ns7 issue - erratic onmouseout

Natrous
03-05-2003, 12:22 PM
I'm having trouble with an onmouseout event in ns7
The html at the end is a simple example that demonstrates what I'm talking about.

When I move over the fade div, the onmouseover event fires, but when I move off, nothing happens. Then if I move the cursor back over, and then off again, the onmouseout event finally fires.

When I move over the other image and then off, the border turns color as is expected. What's the problem here? I intentionally made the functions as similar as possible to keep issues to a minimum. Is there something about the MozOpacity that I don't know about?

<html><head>
<script language="Javascript">
function noFade(elem, on)
{
if(on == 1){elem.style.MozOpacity=1;}
else if(on == 0){elem.style.MozOpacity=0.2;}
}
function borderOn(elem, on)
{
if(on == 1){elem.style.border="2px solid #ff0000";}
else if(on == 0){elem.style.border="2px solid #000000";}
}
</script>
<style>
div{width:150}
.fade{-moz-opacity : 0.2;}
</style>
</head>
<body>
<div class="fade"
onmouseover="noFade(this, 1)"
onmouseout="noFade(this, 0)">
<img src="images/ema_logo.gif">
</div><br />
<div
onmouseover="borderOn(this, 1)"
onmouseout="borderOn(this, 0)">
<img src="images/ema_logo.gif">
</div>
</head></html>
gil davis
03-05-2003, 12:42 PM
If it's any consolation, it seems to work in NS 6.

I thought I saw something on the DevEdge site that talked about dropping support for the MozOpacity. It is certainly not in the W3C recommendations.

Also, how do you know the event does not fire?
Natrous
03-05-2003, 01:04 PM
Well, it will fire if you replace it with a different function call as the onmouseout expression, but if you keep the noFade function call, it still acts funky.

For example, changing

onmouseover="noFade(this, 1)"
onmouseout="noFade(this, 0)"

to

onmouseover="noFade(this, 1)"
onmouseout="borderOn(this, 0);noFade(this, 0);"

causes it to work right the first time you try it, but then it
reverts back to being broken, and

onmouseover="borderOn(this, 1);noFade(this, 1);"
onmouseout="borderOn(this, 0);noFade(this, 0);"

has all of the problems of the original.
If MozOpacity is dropped, is there any other equivalent method of accomplishing this same thing without resorting to swapping images rollover style?