We built hover-lib at LinkPeek because we needed a way to add on-hover images to select links. Images are loaded just-in-time to reduce bandwidth usage.

Update: We wrote a really neat example of what hover-lib does: Website Screenshot of every two-letter domain

The hover-lib library may be downloaded here: hover-lib.

How to use hover-lib

include hover-lib.css in the head:

<head>
  <!--   include the hover-lib stylesheet  -->
  <link rel="stylesheet" href="hover-lib.css">
</head>

include jquery.js and hover-lib.js after the body:

</body>
  <!--   after the closing body tag import jquery.js   -->
  <script type="text/javascript" src="jquery.js"></script>
  <!--   after the closing body tag import hover-lib.js   -->
  <script type="text/javascript" src="hover-lib.js"></script>

and now you are ready to use hover-lib on your links!

<a href="https://www.google.com/" class="hover-lib" id="https://www.google.com/images/srpr/logo4w.png">hover this link!</a>

class="hover-lib": causes the link to become a hover-lib link.
id="/location/of/the/hover-image.png": is the src URI location of the image which you want to appear on-hover

There is a complete example in the download listed above.

Images on hover-lib