Nifty Javascript Pattern

Search

At work, we’ve been putting a
lot of time into what used to be called “Dynamic HTML,” i.e. making
web pages more dynamic and lively with a variety of Javascript techniques.
There’s this one design pattern that keeps turning up, and for those who
aren’t already JS hacks, it may be worth stealing.
Illustrated with pretty pictures.

Below are nine thumbnails of some of the more-downloaded pictures from ongoing.
(Actually, all the most-downloaded are screen shots, yer a bunch of
hopeless geeks, but I digress).
Wave your mouse around over them; in any reasonably-modern browser the date
and title of the essay the picture’s attached to should appear below.
More on the implementation below.

The UI Issues ·
Admittedly, Antarctica’s
Visual Net pushes the
browser-interface envelope in several ways, but we really like this notion of
having a rich display area that you can move your mouse around and get a
read-out in another, fixed, location. Easy on the user’s hand and
eye.

Also notice that the readout switches when you mouse over a picture, but
then it stays there until you mouse over another.
The idea is that you should be able to use the readout, by clicking in a link
or copying text out of it.

The Javascript Issues ·
Those of you who care about these things, do a “View Source” and
look at the script.
This pattern works well with database-backed publishing, the basic idea is:

You write all the alternate readouts’
contents in where they get shown, and you wrop each one in a
<span> with
a unique ID value and give it a class (in this example,
class='hide') that has display:none set in the CSS
stylesheet.

You write a list of the all the ID values into your script.

When the mouse goes over any of the targets, you run through the list
of all
the ID values, and you set them all to the invisible class except the one the
mouse is over; in this example, it gets class='show'.

It’s kind of a brute-force approach, but I’ve never seen a
noticeable delay even when the list of possible readouts was dozens long, as
opposed to the nine here.
And it seems pretty bullet-proof in all modern browsers.
And, I like the effect.