Link Thumbnail : Photo Mouse Over

A little bit JavaScript, a little bit CSS and a little bit clairvoyance, Link Thumbnail shows users that are about to leave your site exactly where they're going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page. It's […]

A little bit JavaScript, a little bit CSS and a little bit clairvoyance, Link Thumbnail shows users that are about to leave your site exactly where they're going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page. It's a nice visual cue that serves a very real purpose: providing a clearer picture (no pun intended) of what's ahead.

How to implement:

  1. Download source code for Link Thumbnail.
  2. The file, linkthumb.zip, contains the script, one required image and an example page. Once downloaded, upload the script and the image to your site. They must be in the same directory.
  3. Link to the Javascript and Add Style: Add a link to the javascript in the page(s) you'd like Link Thumbnail implemented. Remember to adjust the path to properly point to the location of the file on your server. Then, you need to a line of CSS code. You can copy this entire block and paste it into your <head> section:

    <script language="JavaScript" type="Text/JavaScript" src="http://myserver.com/path/to/javascript/arc90_linkthumb.js"></script> <style type="text/css" media="screen">.arc90_linkpic { display: none; position: absolute; left: 0; top: 1.5em; } .arc90_linkpicIMG { padding: 0 4px 4px 0; background: #FFF url(/tools/c/images/linkpic_shadow.gif) no-repeat bottom right; }</style>

    Add Classes to Your Link Tags: Give a thumbnail to a link by adding the "linkthumb" class:

    <p>Within this text, I can show a site image on an external link just by adding a class to my anchor tag.</p>  
    <p>Here is an ordinary basement.org link.</p>  
    <p>Here's a paragraph without a link.</p>  
    <p>...  

    Give Thumbnails to All: Want all of your links to display thumbnails? No problem. Add the following line to your script headers:

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
          <title>arc90 lab | tools: Link Thumbnail</title>  
          <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
          <script language="JavaScript" type="Text/JavaScript" src="http://myserver.com/path/to/javascript/arc90_linkthumb.js"></script>  
          <style type="text/css" media="screen">.arc90_linkpic { display: none; position: absolute; left: 0; top: 1.5em; } .arc90_linkpicIMG { padding: 0 4px 4px 0; background: #FFF url(/tools/c/images/linkpic_shadow.gif) no-repeat bottom right; }</style>  
          <script>arc90_linkThumbUseClassName = false;</script>  
    </head>

    And now you don't even need a class on your links:

    <p>This regular old link will display a thumbnail.</p>  
    <p>And guess what - this one will, too.</p>  
    <p>Here's a paragraph without a link.</p>  
    <p>...

    arc90 | ajaxian

    Link Thumbnail : Photo Mouse Over