Last year I decided to start a section called
Game Hunter where I'd post pictures of old video games I found at garage sales and thrift stores.
Unlike the semi-popular
video game scans section, I don't see why anyone would want to bother downloading or linking to these images.
I figured the best route to go would be to use a hover image instead of the ol'
"
click the thumbnail for the full-size image". You know, the
effect where the full-size image appears when a visitor hovers over the thumbnail
image:
I did a little searching and found a nifty library called Overlib (
http://www.bosrup.com/web/overlib/)
that seemed like it would work. It looked really easy and was something
I could even use elsewhere on the site. It didn't support showing an image by itself, but did
support background images. No problem, I'd just pass the image to a function and
resize the pop-up to the size of the image.
That worked great, but then I hit the following issues in roughly this order:
- Locally everything was fine, when I tried it from the web the images
didn't appear. After wiggling the mouse around they'd eventually pop-up.
Overlib displayed the text just fine but didn't wait for the background image
to load. I assume this is by design since a "background" image is
typically small but I was trying to force 100-300K images through. I could
pre-load all the hover images but that would send a couple megabytes of images
down to a visitor who may never see any of the images.
- After adding code to wait for the image to load and launch the pop-up when
complete...
- No message notifying the visitor that the image was loading.
- The image would appear even if the user was no longer hovering over the
thumbnail and not go away until they hovered over another one.
- If the user moved on to a different image, they'd see a previous one they
hovered over instead of the current one.
After some trial and error, I ended up with the following script to make it all
work:
<script
type="text/javascript"
src="../script/overlib/overlib.js"><!-- overLIB (c) Erik Bosrup -->
</script>
<script language="JavaScript">
var cancelImage=false;
function overlibImage(caption,imagePath)
{
bgImage=new Image();
bgImage.src=imagePath;
if(!bgImage.complete)
{
overlib("loading image..");
cancelImage=false;
bgImage.onload=function()
{
if(!cancelImage)
{
var substringpos=bgImage.src.length-imagePath.length;
if(bgImage.src.substring(substringpos)==imagePath)
{
overlib(caption,TEXTCOLOR,'#FFFFFF',BACKGROUND,imagePath,FGCOLOR,'',WIDTH,bgImage.width,HEIGHT,bgImage.height);
}
}
}
}
else
{
overlib(caption,TEXTCOLOR,'#FFFFFF',BACKGROUND,imagePath,FGCOLOR,'',WIDTH,bgImage.width,HEIGHT,bgImage.height);
}
}
function overlibMouseout()
{
cancelImage=true;
return nd();
}
</script>
..with the following in the body to display the thumbnail image:
<a
href="javascript:void(0);"
onmousemove="return overlibImage('title','full-image.jpg');"
onmouseout="return overlibMouseout();">
<img
style='border:1px dashed;'
src="thumbnail-image.jpg">
</a>
I don't think this is a horrible approach, although I'm sure somebody will send me an email explaining a much simpler way to accomplish the same effect.
Until then, I'm satisfied with the results. You're free to use this sample code
on your site, no restrictions or whatnot.
Everything on this site is free. I'll never use pop-ups or randomly
generated ads to support it. If you've found something here to be
especially helpful or entertaining please consider making a small
donation. This can be done through a secure PayPal transaction.
Thanks for visiting my little web page!
Legal Notes
Unless otherwise noted, all content is copyright (c) 2008 Hugues Johnson and may not be redistributed in any form without express permission.
Java is a registered trademark of Sun Microsystems
C# and Outlook are registered trademarks of Microsoft
