In reading the title one may guess that this article is just another in the many where some geek wishes to show off his latest JavaScript web-toy. And, of course you’d be right about that. However, my hope is that you will find the mouse follower, YAMF, demonstrations as an entertaining sidebar diversion as you read through the more arcane cross-browser, JavaScript and Dynamic Hyper Text Markup Language (DHTML) idiosyncrasies uncovered while developing such a toy. YAMF is invoked as a function call in the form:

YAMF(MESSAGE[,OPTIONS]) where;

  MESSAGE - text string to convert to images
  OPTIONS - optional text string containing options
            for how to display the message images.

The options are displayed under each example with blue indicating ones that were set for that example and green representing unset (default) values used for that example. YAMF displays up to 25 character images at one time but will display all character images when the marquee option is selected by scrolling them in the 25-image display. Also, while the supplied images for YAMF are the keyboard characters there is no limit to what a person may use for creating an effect. For example, one could create a graphic stream of ever-widening stars and then break the stream into, say, a set of ten images and name them star0.gif to star9.gif and then make a YAMF call specifying a "0123456789" message and the overlap type, dither effect and star iprefix options. This would produce a magic wand effect as the mouse is moved and if later they made the same call to YAMF but added, say, a 0.25 scale option, it would appear as pixie dust to the mouse movement.

To activate any YAMF effect, merely move the mouse over the desired image. The effect will remain in effect until you either move the mouse over another YAMF effect or until you move the mouse over the YAMF OFF! text.

Note: On Netscape 4 the image width and height properties are read-only; thus, the YAMF Scale option will not work on that browser and the images will always be the size of the true dimensions of the default image files.

Recall back in high school math classes where you were required to learn the arcane ins and outs of such esoteric things like the Quadratic Formula and hyperbolic functions? If you were like most students, you often wondered why they had not provided real world examples for explaining these strange sets of numbers, letters and symbols. Sure, you had the book and it even showed various graphs and examples meant to provide meaning to the difficult mathematical construct. But, all too often they merely made you feel even more inadequate, since after studying them you still were not any closer to understanding the concept than before.

Writing cross-browser, cross-release DHTML comes close to matching this frustrating experience. Yes, there are many excellent references that discuss in exacting detail what each browser is capable of doing, not the least of which being ones freely available on the browser web site. However, the problem with these is two-fold. One, the documentation doesn’t always match the implementation and two, there are areas where specificity is lacking, leaving one to divine its resultant behavior.

This article will attempt to address both those problems by providing actual results discovered while designing a tool that really put the browsers through a rigorous set of DHTML tests and discovering several areas where the browsers ‘wiggled.’ Areas like cross-browser incompatibilities (including Netscape 7 and Internet Explorer 6), effective workarounds, JavaScript coding limitations and browser testing insights are discussed.

So, settle back, ready your mouse, clamp on your spectacles and lets get started.