[Mailed to OP]
I just finished developing a javascipt component allowing floating
captions to appear over HTML elements.
If anyone wants to check it out you can see specs and download it from
http://boxover.swazz.org.
First of all, apologies to the OP. I'm mailing you as I'm not sure if
you're still watching this group.
Secondly, the presentation is nice, but there are a couple of important
comments I would like to make.
One huge problem with this is that the title attribute is thoroughly
raped. For your script to work, the author must enter text that meets a
specific format. However, how will that be dealt with by accessibility
devices like Braille and screen readers, or users with Javascript disabled
but browsers that render the title content?
Authors that are required by law to produce accessible sites (a growing
number) might like your script, but they will be completely unable to use
it. The text for the caption can be specified by the content of the title
attribute, but that should be it.
I also think you should be more selective when applying the effect. Every
element with a title attribute seems over-the-top.
The web site
- You should validate your HTML and CSS.
See the results for each at:
<URL:
http://validator.w3.org/check?uri=http://boxover.swazz.org/>
<URL:
http://jigsaw.w3.org/css-validator/validator?uri=http://boxover.swazz.org/&usermedium=all>
- Similar to above: please advocate good development practice.
1) <SCRIPT SRC="BoxOver.js"></SCRIPT>
The SCRIPT element requires the type attribute. Update the snippet to:
<script type="text/javascript" src="BoxOver.js"></script>
2) <DIV style="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px">
Pixels values should be avoided for dimensions that are related to text.
Instead, use ems, which are proportional to the height of the current font.
3) Uses: ALT and TITLE replacements
This code is *not* a replacement for the alt attribute. The alt attribute
is a replacement used when the image, form control, applet, or client-side
image map area cannot be rendered. It should not be implied that alt is
for providing tool-tips. That's the job of the title attribute.
The script
- You don't use feature detection.
The first few lines of code look like (wrapped):
document.all ? window.attachEvent('onload',init)
: window.addEventListener('load',init,false);
However, what does document.all have to do with support for
window.attachEvent? Yes, IE supports document.all and the attachEvent
method, but other browsers do support document.all but probably not
attachEvent.
See <URL:
http://www.jibbering.com/faq/faq_notes/not_browser_detect.html>
for more information.
- You pollute the global namespace.
Anyone that has written non-trivial code in any language will tell you
that global variables, especially in library code, are a bad idea. If
anyone happens to use a variable name that matches one of yours, its
likely that either their script, or yours, will break.
It's also quite curious that in some cases, you choose global scope when
it should clearly be local.
You might want to read a post I recently made on c.l.js
<URL:
http://groups.google.com/groups?threadm=opsgt8lmmvx13kvk@atlantis>
in the thread "Define prefix MM to function". That link may not be active
yet.
- Overuse of the style object.
To be honest, I fail to see why you're applying the bulk of your styles
though script when they could be applied through a class or id selector in
a style sheet. Furthermore, there are several instances where you specify
length values, but you fail to include a unit. This is invalid and
conforming browsers should ignore those declarations.
- Bad use of parseInt.
See the FAQ notes regarding type conversion, particularly the section,
"parseInt with a radix argument":
<URL:
http://www.jibbering.com/faq/faq_notes/type_convert.html>.
- Declaring variables without using var.
Related to an earlier point, you introduce some variables without using
the var keyword. Most of these should only be local, so the var keyword
must be used in such cases. However, I (certainly) regard it as good
practice that all variables, global or not, should be declared with the
var keyword.
One last, much more minor point:
curNode.hasbox='true';
seems a little odd. Why not use a boolean?
I wouldn't call this list exhaustive, but it would certainly resolve the
majority of problems. I haven't for example, examined the positioning code
moveMouse() in any great detail.
Mike