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 hasdisplay:noneset 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.
