onmouseover / onmouseout not working as expected

[yawnmoth]

onmouseover and onmouseout seem only to work half the time in a script
i wrote to fade between different opacities:

http://www.frostjedi.com/terra/dev/test.html

(works in firefox, but not in internet explorer).

also, the webpage doesn't validate because, i guess, the dns's used by
the w3c validation services aren't up-to-date and still show a generic
page.

 

[Michael Winter]

onmouseover and onmouseout seem only to work half the time in a script i
wrote to fade between different opacities:

http://www.frostjedi.com/terra/dev/test.html

(works in firefox, but not in internet explorer).

I believe it's a bug. Simple as that. I made my own version of your script
(which "works"[1] in all browsers, by the way) and noticed that when the
opacity level reaches 100%, there is a brief flicker (though it doesn't
happen in IE). If the maximum value is reduced to 99%, this flicker
doesn't occur and the mouseout event fires normally.

On the demo page at
<URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/yawnmoth/fade.html>, the
W3C image will go to 100% and the Firefox image to 99% (I've commented out
the line which limits the maximum to 99 for this test). Hopefully you'll
observe the difference.

To address the issue Kae mentioned (which I also noticed), the script uses
a hash table using the object references as the key and timer id as the
value.

also, the webpage doesn't validate because, i guess, the dns's used by
the w3c validation services aren't up-to-date and still show a generic
page.

It does now. In any case, the mark-up I used is Strict. You should note
that all modern pages should be written to the Strict DTD. The
Transitional DTD was only a temporary measure so that legacy pages could
be considered valid[2].

Mike


[1] Meaning: does something sensible. If the techniques attempted are
supported you'll have your fading images. If not, nothing visible will
happen and there will be no errors. Currently, IE6 and Gecko-based
browsers perform the fade.

[2] That's my hypothesis but I've seen others in HTML groups share the
same view.

 

[yawnmoth]

<snip>

I believe it's a bug. Simple as that. I made my own version of your script
(which "works"[1] in all browsers, by the way) and noticed that when the
opacity level reaches 100%, there is a brief flicker (though it doesn't
happen in IE). If the maximum value is reduced to 99%, this flicker
doesn't occur and the mouseout event fires normally.

On the demo page at

W3C image will go to 100% and the Firefox image to 99% (I've commented out
the line which limits the maximum to 99 for this test). Hopefully you'll
observe the difference.

To address the issue Kae mentioned (which I also noticed), the script uses
a hash table using the object references as the key and timer id as the
value.

<snip>

It does now. In any case, the mark-up I used is Strict. You should note
that all modern pages should be written to the Strict DTD. The
Transitional DTD was only a temporary measure so that legacy pages could
be considered valid[2].

Mike


[1] Meaning: does something sensible. If the techniques attempted are

supported you'll have your fading images. If not, nothing visible will
happen and there will be no errors. Currently, IE6 and Gecko-based
browsers perform the fade.

[2] That's my hypothesis but I've seen others in HTML groups share the
same view.

Wow - that was a great post! Thanks!

I haven't yet looked at the code in as thorough detail as I'd like to,
but based on what I have seen, support for more browsers should be
do'able by adding the CSS attributes -moz-opacity and -khtml-opacity.
Unfortunately, doing this will prevent the CSS from validating (I
noticed you used IE's commenting system to prevent that part of the CSS
from being validated), but short of defining them in an onload
function, or something, I'm not sure what can really be done about
that. Anyway, adding support for those should be easy enough, if I
decide to do it

With regard to Strict vs. Transitional - the webpage I intend on using
this script on is XHTML 1.1 compliant (which, I think, is Strict by
default), but I hadn't considered doing it for the testpage. I'll keep
that in mind for future posts. Thanks!

 

[Michael Winter]

[snip]

Wow - that was a great post! Thanks!

You're welcome. It was interesting.

I haven't yet looked at the code in as thorough detail as I'd like to,
but based on what I have seen, support for more browsers should be
do'able by adding the CSS attributes -moz-opacity and -khtml-opacity.

It is, but it will also require script changes: changing the opacity
property won't have any effect on either of the other two. So, I've
modified the script to determine which property is actually in effect.
It's not been used on the demo page, but you can download it from
<URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/yawnmoth/fade-new.js>.
Testing shows that all versions from Mozilla 1.0 onwards now fade but
unfortunately, earlier versions still exhibit the original sticking
problem.

I've added a few more comments to the new version, but if you have any
questions, just ask.

Unfortunately, doing this will prevent the CSS from validating

I don't think CSS validation is as important as mark-up validation. As
long as the syntax is correct and the errors are only due to unrecognised
properties (which will be ignored), then everything should be fine.

(I noticed you used IE's commenting system to prevent that part of the
CSS from being validated),

IE's filters might be treated as more than just an unrecognised property
name. The validator certainly thinks so.

but short of defining them in an onload function, or something, I'm not
sure what can really be done about that.

Not much, if anything.

Anyway, adding support for those should be easy enough, if I decide to
do it

Well, yeah. I did it for you!

With regard to Strict vs. Transitional [...] I hadn't considered doing
it for the testpage. I'll keep that in mind for future posts. Thanks!

It's not a big deal for test pages. I thought you intended to use
Transitional mark-up on a production page; lots of people do. However,
there's no harm in writing to a Strict DTD for both.

Good luck with this,
Mike

 

[yawnmoth]

[snip]

Well, yeah. I did it for you!

And you probably did a better job than I could have done on my own,
heh.

Anyway, I've learned a bit from your code, already, so hopefully next
time I won't need to ask for help (or if I do, it won't be as much help
as I would have otherwise needed)

Good luck with this,

Thanks!