[TriLUG] http question thumbnail picture with magnifiying glass

Kevin Hunter hunteke at earlham.edu
Tue Jan 19 20:02:44 EST 2010

At 5:29pm -0500 Tue, 19 Jan 2010, Joseph Tate wrote:
> The simplest method would be to load the full size image using
> height/width tags or css styles to display it as a thumbnail, and then
> use javascript on the onmouseover to display a z-order div with the
> full size image or portion thereof.

For simplicity, I might suggest a tactic without javascript, but
basically the same concept:

Load complete image but display as a thumbnail *and* large image with CSS:

.div#gallery {
	pointer: ...

.div#gallery img {
	width: 40px;
	height: 50px;

.div#galler img:hover {
	width: ...

Note that letting the browser do the resizing usually results in a much
lower quality thumbnail.  The command line tool 'convert' (from
ImageMagick) might come in handy ...


More information about the TriLUG mailing list