Clickable java-free thumbnail text

A project required some clickable jpegs, but didn't want to use javascript to do all of this - I don't like how cumbersome java typcially becomes and when scripts become broken. I was somewhat determined to make the thumbnails myself and then manipulate the rest with Cascading Style Sheets (CSS). At the bottom of the entry here, however, I found a lightweight and probably foolproof java script. Additionally, in the search for the CSS solution, I ran across a notable introductory CSS tutorial here, and one that explains how to create rounded corners here.

thumbnail generation

First downloaded jpg generator jpgtn. It compiled OK, but had errors when I first attempted to use it with this command patched together from its man page:

$jpgtn -H -s 128 -d "./thumbs/" -p "tn_" *.jpg

It appeared there was an unstated dependency on ld.so which I located using strace:

access("/etc/ld.so.preload", R_OK) = -1 ENOENT (No such file or directory)

It's true ld.so is lacking, but it's long been deprecated and is not the problem. The problem is I specified "jpg" in the jpgtn command line, limiting jpgtn to processing only files with a jpg extension. Files in that folder with any other extension, ( eg. JPEG, jpeg, JPG or say txt) cause jpgtn to exit with an error. The program also exits with an error if a "thumbs" sub-folder has not previously been created. Accordingly, once I put all jpegs into a folder, named them with the same "jpg" extension, and created a "thumbs" subfolder, I processed all the photos in that folder with the single command above.

mouseover text

For ease, mousing over the thumbnail should provide a text description of it,, but I wanted to do this without the pain of java, and within CSS. Several solutions appeared. The first good description of how to understand CSS mouseover options was here, but it appeared to deal mostly with links. A more complete description using span was found here, but this involved editing the style sheet in some way I didn't understand. The site ultimately with a page by page solution was this one. The author apparently wished to insert some effects on his MySpace page. MySpace apparently allows CSS but not java.

Using the code from the site, I put a thumbnail on the page with the mouseover text "Statics Class 2005", in the following way:

<div class="popuptext0">
<center>
<a class= "hoverTest" href="stats.jpg">
<img src="tn_stats.jpg"> <br>
<span class="popUpSpan">Statics Class, 2005 </span>
</a>
</center>
</div>
<style>
div.popuptext0 {width:150px; height:auto}
a:hover img {filter:none;}
a img {border:0px !important;}
a.hoverTest {width:150px; height:auto; }
a span.popUpSpan {visibility:hidden;}
a:hover span.popUpSpan {visibility:visible; display:block; border:1px silver solid}
a span.popUpSpan {color:black; font-size:13px}
a:link, a:hover {text-decoration:none !important;}
</style>

This worked fine - it named the photo and recalled the larger photo when clicked. But what about having multiple thumbnails across a page, in gallery format, with text available, how to arrange this?

lightweight java solution

Eventually, I found a partial java solution which was lightweight, meaning it didn't require pages of code. Additionally, it automatically generated the thumbnails for me. I found a micro script at dynamicdrive which did the trick and didn't require many resources. Problem solved, pretty easily.