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.
You write all the alternate readouts’
contents in where they get shown, and you wrop each one in a
a unique ID value and give it a class (in this example,
class='hide') that has
display:none set in the CSS
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
the ID values, and you set them all to the invisible class except the one the
mouse is over; in this example, it gets
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.