Javscript to add a preview button using Snap Preview Anywhere

Inspired by Jacky, who doesn't like the mouseover behaviour of Snap Preview Anywhere, this script is to add a "preview" button next to your original links. It will open the Snap Preview panel when you CLICK it instead of on mouse over.

The trick is simple that the script hides the Snap Preview panel (with id "snap_preview_anywhere_main") in mouseover event, and show it back in the click event.

Example:
Google
Yahoo
Angus

Code:
<html> <head> <script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=0&key=2934c763bf49ae6081984543746d0f57&sb=0&domain=angusdev.mysinablog.com"></script> <script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a.snap_append_preview").each(function() { var previewLink = $(this).clone(); $(previewLink) .addClass("snap_preview") .removeClass("snap_append_preview") .css({"font-size":"0.7em", "padding-left":"0.5em" }) .html("[Preview]") .insertAfter(this); $(previewLink).mouseover(function() { $('#snap_preview_anywhere_main').hide(); }); $(previewLink).click(function() { $('#snap_preview_anywhere_main').show(); return false; }); }); }); </script> </head> <body> <a class="snap_append_preview" href="http://www.google.com">Google</a> <br/> <a class="snap_append_preview" href="http://www.yahoo.com">Yahoo</a> <br/> <a class="snap_append_preview" href="http://angusdev.mysinablog.com">Angus</a> </body> </html>