Overlib Image Hover
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
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
- 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
src="../script/overlib/overlib.js"><!-- overLIB (c) Erik Bosrup -->
..with the following in the body to display the thumbnail image:
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.