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.
Archived Comments
We implemented this about a month ago to mixed reaction from our customers. The problem we've found is CFTOOLTIP will sometimes render the pop-up at the bottom of the screen instead of next to the image. Another common issue is the CFTOOLTIP image flickering off and on. This will happen on smaller screens where the pop-up image is forced to render on top of the original image.
You can see our implementation on a demo site. We have the pop-ups on all product images: http://www.ourspecialties.com/. Many customers have turned it off on their sites.
Any ideas on how to improve the experience are welcome. It was very easy to implement so I'm not really interested in writing my own JavaScript. I'd prefer Adobe tweak the source code so all we have to use is CFTOOLTIP.
Thanks
_Wow_. It is seriously fubared on your site. Are you running the latest CF8? (Ie 801 with hotfixes?)
Yes, we're at 8,0,1,195765. See, it looks and works fine for me on my computer at work and at home. On my laptop it doesn't work as well.
Weird. Sorry - you got me. I don't use cftooltip that much. I'm almost entirely jQuery now.
@Jason
You brought back the blink tag! Awesome ;)
It looks great on a big monitor but when I made the browser smaller I see the problems. Not sure how to solve it unless you provide smaller images? From the source code I see that you specify the width and height of the images. Perhaps you can use css styles to do a percent of the window?
What about embedded (malicious) script say in the tooltip code? How is that handled?
what about a jQuery Demo...(BTW, I'm a jQuery fanatic as well now)
Sure, and I could do it 'proper' (with caching of the resizing).
@Peter: What do you mean?
I've been using a jQuery plugin called qTip I've been rather pleased with - available here:
http://craigsworks.com/proj...
Plenty of ways to customize the look and feel.
Really cool, i prefer using good CF instead of all other available .js libs (even if some are more powerful indeed, but for a small gallery without any pretention, great!)
Question though, how does one make the tooltip stay indefinitely until the user moves off the image? I've found that changing the autodismissdelay does nothing. Even when I close all browsers and come back. It never changes from 5 seconds.
I even set it to 500000 just to see. Restarted the CF Dev server and nothing. Still... 5 seconds.
I seem to remember a bug report on the autodismissdelay. YOu running the latest rev of CF8?
Sure am.
Server Product ColdFusion
Version 8,0,1,195765
Edition Enterprise
It may _not_ be fixed then. Sorry - might need to raise it w/ Adobe support.