Revealing 'shortdesc' on :active

[weegillis]

The set up:

<p class="wallpaper">
 <a href="/downloads/pot-of-gold_wp.jpg" id="potofgold" rel="lightbox" title="Pot of Gold photo Copyright 2006">&nbsp;</a>
 <span>Photo taken late July, 2006 around 6 PM MDT looking eastward 
 from Alberta Highway 894 near Aspen Road. We had just driven 
 from Chauvin to Edgerton through this thunderstorm.
<a href="/downloads/pot-of-gold_wp.jpg" title="Photo Copyright 2006">Pot of Gold</a></span>
</p>

CSS as applies:

p.wallpaper {
 width: 128px;
 height: 98px;
 margin:1em auto;
 border: 1px solid #d4af37;
 position: relative;
}
p.wallpaper span,
a#potofgold {
 display: block;
 width: 120px;
 height: 90px;
 position: absolute;
 left: 4px;
 top: 4px;
}
p.wallpaper span {
 font:normal 60% Arial, Helvetica, sans-serif;
 overflow: hidden;
 z-index:9;
}
a#potofgold {
 text-decoration:none;
 background: transparent url(bgds/pot-of-gold.jpg) no-repeat 50% 100%;
 z-index:10;
}
a#potofgold:hover {
 background-position: 50% 0%;
}
/* kills link in IE and does nostyle version in Firefox */
a#potofgold:active {
 background-image:none;
 background-color:transparent;
}

download working image (120x180 4kb)

The idea is to have a shortened form of a longdesc visible while the anchor is :active. We can call it a shortdesc.

A paragraph contains an anchor and a span, both of which are absolutely positioned to identical coordinates. The anchor is given a higher z-index so it will be the top layer.

The anchor has no text, just a background image. Since a/a is an inline element, to which dimensions cannot be applied, the anchor is set to block level with width and height. A view port and 'click zone' the width and height of the anchor is now in place.

The :hover behavior, basically reposition a background image that's twice as high as the view port, toggles the visible edge, top or bottom. Old stuff this...

The text in the span could best be described as alternate text for when images are turned off, this in the absence of an actual alt attribute (or longdesc attribute, for that matter).

In Opera the :hover behavior is normal, as it is in Safari and IE. Firefox doesn't display the image or paragraph border, just the '_' link text and the span text in page default font and size. Guess it's out the equation for now.

In the above sans-firefox configuration, the onclick behavior is similar in that the span text is now visible, and remains visible as long as you don't let up on the button.

IE does nothing even when you do let up on the button. Click again and the original background comes back into play. Click again, the span text. Click all you want, it will just toggle. The link is effectively dead.

Safari jumps immediately to the hook reference and opens the target image in a lightbox as soon as you let go of the mouse button. If you drag off the anchor view port before releasing, nothing happens and the normal state is restored.

Opera adds a whole 'nother twist: If you click, then drag a little until it blurs, then release, the :hover background gets swapped out, and the span appears in its place. Mouse over, mouse off, mouse over, mouse off. Until you click anywhere.

On demonstration one will get the general premise of my exercise. Without all the wrinkles ironed out it certainly can't go into production (unless one wishes to hide a link from IE, might have stumbled onto something here...).

Can anyone please suggest a way to get this to fire on all cylinders? It might just have some potential use on a larger scale.