Images on hover-lib


Posted 3 years ago
by Russell to gift of code


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.

Browse the blog archives or subscribe to the full-text feed
.


Let us capture, store, and update webpage screenshots for you.

See Plans and Pricing
No Risks, Pay-as-you-go