JavaScript/CSS Photo-Caption Zoom

Kimler Caption no.3

Jan 30, 2005

CSS/JavaScript Photo Caption Zoom

Demonstration of the technique

Until there was a last minute problem with long captions, (see the CSS notes below) this was the best photo-caption zoom option. It combines JavaScript & CSS. JavaScript is used to define the width parameter in the HTML body, using 'onmouse' functions. I didn't find a way to specify a:hover pseudo-class elements in the HTML, using style attributes. The World Wide Web Consortium (W3C) needs to provide for this. It was on their agenda, because there is a working document dated 2002 here that shows what the syntax is supposed to look like. It doesn't work and that part of the specification must've dropped through the cracks.

If someone knows how to do this, an email would be greatly appreciated. Per the W3C, it's supposed to look like:

<a href="#" style="{color: #900} :hover {outline: thin red solid}">

Visually, the JavaScript/css version is nearly identical to the CSS solution. There is a problem in the FireFox v1 browser that is mildly distracting. I believe it stems from the combination of a:hover and JavaScript 'onmouse' funtions. It's evident when entering and exiting the image from its base. The problem can be remedied on entry, but not on-exit. (At least, I haven't found a solution). It's more of a issue when the image is floated right, because as the large image is resized to a thumb, it is first floated left, within the larger "zoom" <div>, before finally collapsing down to a 100px-wide thumbnail. Do you see it? (See the CSS notes, below, or the blog). It's only been tested with IE6(sp2) and FFox(v1). Feedback on other browsers & versions will be appreciated.

Notes on the method

It is not a pure-CSS solution.

The CSS code has a much lighter footprint than the pure-CSS version.

The HTML width specification means that ANY image size can be used & coded, on-the-fly - both final image and thumbnail image.

Kimler Caption no.3 Code


CSS Notes:

  • The IE6 "div.zoom a:hover" selector is no longer needed.
  • However, one must fix the visual on-entry problem in FireFox ('Expanding' the thumbnail image over the Zoom <div>, by using a "margin-bottom:-3px" in the "div.zoom img" selector, did the trick).
  • There was a caption-image alignment problem along the right edge, which was fixed with a "margin-right:-2px", applied to the caption, on hover.
  • Last-minute long-caption problem: Long captions expands the 'zoom div' left & right. The fix was to add a "width:0px" & "width:auto" to the "span.caption" CSS blocks.
  • The long caption fix causes a problem in FireFox (IE is fine) when you exit the zoomed image through its base. I have NOT found a a fix for this. If anyone finds one, please let me know. (Because I've spent too much time on this already, I'm going with the pure-CSS version. Using multiple class names makes it flexible & easy to use.)

/* Photo Zoom CSS */

div.zoom { float:right;
margin:0px 0px 2px 10px; }

div.zoom img { border:1px solid #369;
margin-bottom:-3px; }
/* fix FFox on-entry */

div.zoom span.caption { display:none }

div.zoom a:hover img { margin-bottom:5px; }

div.zoom a:hover span.caption {
border:1px solid #369;
margin-right:-2px } /* pic-cap align */

div.zoom a:hover span.inner {
padding:5px; } /* avoid IE box model hack */

/* End Photo Zoom CSS */


HTML Notes:

  • The <a href> is linked to the image. Any link will work. One can substitute "javascript:void(0)" or "#", so it kills the link.
  • Having thumbnail & large-image witdths in the HTML means that ANY image dimension can be used. It also means that one can choose a thumbnail size on the fly.
  • One cannot move all of the a:hover size attributes into the HTML using JavaScript 'onmouse' functions. Because the "caption" span is not displayed, the cursor cannot activate any 'onmouse' functions, which means that the size attributes for the caption must remain in the CSS.

<!-- start photo-caption zoom code -->

<div class="zoom" onmouseover="'250px'" onmouseout="'100px'">

<a href="cssZoom07.jpg"> <img src="cssZoom07.jpg" style="width:100px;" onmouseover="'250px'" onmouseout="'100px'" alt="MIT's toy 'Topobo'" title=" Construct & program your own bot. " />

<span class="caption">

<span class="inner"><strong>

<!-- ================ -->

Topobo: </strong>Designed at the MIT Media Lab, this complex toy turns adults into kids.

<!-- ================ -->





<!-- end photo-caption zoom code -->