This is a neat little piece of code sent to me by Miles Jordan. He credited Dave Watts for the original idea. The code makes use of the CFTOOLTIP tag, one of ColdFusion 8's Ajax features. The tag allows you to easily provide tooltip information for items on the page. What's cool is that the tooltip can be both simple text and HTML. He makes use of this by feature by simply using the larger version of the image as the tooltip. Check it out:
<cfset image_path = "/Users/ray/Pictures/sad.jpg" > <cfimage name="large_preview" source="#image_path#"> <cfset imageScaleToFit(large_preview,600,600,'bicubic')> <cfsavecontent variable="tooltip_image"> <cfimage source="#large_preview#" action="writeToBrowser"> </cfsavecontent><cftooltip tooltip="#tooltip_image#" autodismissdelay="5000"> <cfimage name="small_preview" source="#image_path#"> <cfset imageScaleToFit(small_preview,120,120,'bicubic')> <cfimage source="#small_preview#" action="writeToBrowser"> </cftooltip>
He begins with an initial image resize to a decent, but still large, size. Notice the saves the HTML created by the writeToBrowser action. This HTML is then used in the tooltip.
Altogether, you get this effect when you mouseover the image:
Pretty nifty. Just one nit - I'd save the resized images. Image resizing on the fly for every request is typically a bad idea.