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.

When: 2003/06/09 2003/06/08 2003/05/22 2003/05/07 2003/05/24 2003/05/06 2003/05/21 2003/06/29 2003/06/29
ongoing: The Picture of Happiness A Working Bit Bucket Pix From Mars iYear Wet Pink Glacier, God, Cat Domestic Nürnberg Big, Small, and More Big, Small, and More

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.

author · Dad · software · colophon · rights
picture of the day
July 19, 2003
· Technology (77 fragments)
· · Coding (98 more)

By .

I am an employee
of, but
the opinions expressed here
are my own, and no other party
necessarily agrees with them.

A full disclosure of my
professional interests is
on the author page.