digg

Join DiggAbout

Donkeys and Elephants and Delegates,oh my!
Check out the most popular Elections 2008 content on Digg.

How to Display a Web site when Hovering over Hyperlinks

lab.arc90.com — When the 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 of what's ahead.

Bury
show profanity settings
expand all
  • affanjam, on 10/12/2007, -2/+6I think it'll be ideal on news sites
    • blobzorz, on 10/12/2007, -2/+2Here is the link with the thumbnailed link

      http://lab.arc90.com/tools/linkthumb/
    • neoform, on 10/12/2007, -14/+11pretty useless since it doesn't make the thumbnail for you..
    • richmulhern, on 10/12/2007, -17/+11Agreed... Who wants to make all those thumbnails? What if your users are providing the links... do you really want them providing the thumbnails also?

      This could of been done years ago with JavaScript... good idea, but not a practical solution.
    • ahewgill, on 10/12/2007, -12/+4ok but wouldn't it be quite expensive to auto generate those thumbnails? Some sort of caching would be required. In addition all of a sudden it requires a server technology instead of just css/javascript.
    • headzoo, on 10/12/2007, -1/+45"Agreed... Who wants to make all those thumbnails? What if your users are providing the links... do you really want them providing the thumbnails also?"

      Here's an idea for you.. why not check out the docs and code, before you look stupid. You don't create the thumbnails yourself. It grabs them from http://thumbnails.alexa.com.
    • kalisphoenix, on 10/12/2007, -0/+5Hehe... the first thing I thought of was having a mouseover event that triggered (via HTML::Mason) a perl script that would call an Automator workflow that would open the linked page in Safari, take a screenshot of it, resize it using Imagemagick, and then pop it up on the webpage.

      Heh. Digg effect the first time anyone visits the page.
    • dbr_onix, on 10/12/2007, -0/+1Theres a bunch of simple programs that create thumbnails of a website (via the command promt), which with some form of server side scripting (perl, PHP, ASP etc) along the lines of
      system("/home/nobody/genScreenshot " . escapeshellcmd($url) . "-width=30 -height=30 -o " . md5(rand(1000) . ".jpg");
      (Incase Digg screws up the code, which I assume it will, basicly use the system() command, escape any shell commands, and use it to run the screenshoting program, output the file to a certain name. Keep it (in a varible) so you can put the URL, and the path to the image in a database, and nick it out when you need it..
      Not exactly super-simple (then again, not that diffult), but it's less work than manually screenshoting, resizing and linking thousands of links..
      - Ben
    • Chongo, on 10/12/2007, -0/+5This would be good if used like a "favicon". Make it a standard or something and any site creator can leave this file on their server and this code can call up the pic.
    • willcode4beer, on 10/12/2007, -0/+1@headzoo, in the javascript (in the zip file), that line is commented out.
      Its getting them from: http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=yourSite.com

      Trying for my site gave "preview not available"
  • eleven, on 10/12/2007, -8/+19Not really all that exciting as it's just a link that displays an image of the site it is supposed to link to. It is not a generated image - just a plain old image that could be anything. If it was using javascript to generate the picture then we'd have something.
    • wingnut21, on 10/12/2007, -5/+8I'm with ya. If he used php to generate the screenshots (something like ask.com) then we'd have something.
    • WeeklyGeek, on 10/12/2007, -6/+10what, you have to generate the image yourself? I dont see that in the article.
    • headzoo, on 10/12/2007, -1/+10"what, you have to generate the image yourself? I dont see that in the article."

      No, you don't. If you look at the source code, you'll see it's grabbing the thumbnails from http://thumbnails.alexa.com. You don't have to do anything more than add the JS to your documents.
    • ei8htball, on 10/12/2007, -5/+1Definatley.

      It's great that it displays the image, but it sucks that it doesn't use something like php to get a current image of the actual page.
      Sounds like a good project for someone better at php than I.
    • tweekgeek, on 10/12/2007, -1/+0@ei8htball:
      You'd have to access Mozilla XPCOM components or the like to actually generate a good image, which as far as I know can not be done with PHP. Alexa's the only way to go to make it easy, or you could mess with a c/c++/java cgi app, or a python script through PyXPCOM bindings. All in all, more trouble than it's worth.
  • zclip, on 10/12/2007, -12/+1Yeah, I'm not impressed.
  • meltingrobot, on 10/12/2007, -0/+7Arrr, there be 404 ahead.
    • ReubADoob, on 10/12/2007, -0/+6nay matey she be work'n just fine now.
    • bitcloud, on 10/12/2007, -0/+4argh tis not september 19th maties... (not that ye needs an excuse)
    • exabytes18, on 10/12/2007, -0/+1Wow. I almost forgot about "Talk like a pirate day." That is one of the most fun days of the year. :-D
  • daedal, on 10/12/2007, -0/+1Hmm, only place I could think of (possibly) using this would be on a "Top 5 Links" kind of page, but it's an interesting script none the less.
  • Avogadro65, on 10/12/2007, -10/+2could this be reworked to use the alexa thumbnails like the Google Preview extension for Firefox?
  • RexKwando, on 10/12/2007, -10/+4This sucks! Unless you can read .00021 size font, this is pretty much useless.
  • renrutal, on 10/12/2007, -0/+6I wonder if there's a Firefox Extension which could do that anywhere, and live.
  • kyrre, on 10/12/2007, -0/+2Does anyone have a script that could easily create thumbnails? I guess starting up firefox at URL and run import -root would do the trick, but it would be somewhat heavy in a busy server environment.
    • zoom1928, on 10/12/2007, -0/+9Here's mine:

      Xvfb :1 -screen 0 1024x1000x24

      DISPLAY=:1 /usr/bin/firefox -height 1024 -width 1000 http://example.com/

      sleep 180

      DISPLAY=:1 import -window root /tmp/captured.png

      convert /tmp/captured.png -resize 100 /tmp/thumbnail.png

      Because it uses the X virtual frame buffer you can run it on a server that doesn't have that bloated X Windows installed. You need to load Firefox and turn-off all the extra, annoying crap it ads like the advertisement/bookmark bar, address bar, buttons, and status bar.

      Now say thank you since that took me about 50 hours of work about a month ago.
    • aboyd, on 10/12/2007, -0/+1Thank you.
    • willcode4beer, on 10/12/2007, -0/+1zoom, very cool, thanks for sharing.
      I can see combining that with a lenya deployment
  • itswoody, on 10/12/2007, -3/+10yuuuuuckk messed up in Safari too!
    • panique, on 10/12/2007, -0/+6Dunno why you're getting modded down for reporting the truth that it malfunctions with Safari. I can confirm it doesn't work with Safari too.
    • mtthwmiddleton, on 10/12/2007, -0/+4I agree, as a web programmer you need to know how any eye candy you use performs on different browsers, if a fairily popular browser like Safari doesn't work well with this I think people need to know
    • willcode4beer, on 10/12/2007, -0/+1This video shows the problem with safari
      http://www.firefoxflicks.com/flick/index.php?id=19542&c=false
  • mark1372, on 10/12/2007, -1/+6It is not a "nice visual effect." It's friggin' annoying. Just what I need: more stuff on sites popping up. I've already disabled Safari's "tooltip URL" that pops up when you hover over a link because it was so incredibly intrusive and the mouse pointer was often over a link or ad just because that's where it ended up.
  • walden, on 10/12/2007, -18/+3duh...!!!! Four steps of crappy HTML Code??? This has been available simpler and easier for macs already for ages. ! Just download this ap for free at http://www.cooliris.com/ and it just works !
    Old news again from the PC camp ! Typical!
  • endyminion, on 10/12/2007, -1/+2Why is this site on the front page again? I thought was already established that they produce bloated javascript versions of things can be done almost entirely in css which aren't even that useful...

    Anyone remember the simple and "unobtrusive" sidenotes?

    I'm going back to my nap. Wake me up when you find something that isn't boring...
  • endyminion, on 10/12/2007, -0/+2unobtrusive sidenotes that was on the frontpage before?

    I also have to wonder how alexa feels about them direct linking their images...
  • edraven, on 10/12/2007, -1/+2You don't have to generate the thumbnails yourself, he's pulling it from msn. ie. http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=www.basement.org
  • CiXeL, on 10/12/2007, -0/+4that'd be great for goatse and tubgirl links
  • khoker, on 10/12/2007, -0/+2
    It probably won't be nearly as cool when http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=apple.com turns on referrer checking or just plain goes away.
    • indicas, on 10/12/2007, -1/+1Unless the creator just fakes the referrer? :)
  • soil, on 10/12/2007, -1/+1Helps to guard against NSFW or sites you otherwise just don't want to see.
  • nicnic77, on 10/12/2007, -0/+4Not sure how popular http://www.browster.com is but this is clearly a (bad) JavaScript interpretation of it.. I can't live without Browster now, such a clever little idea.
    • willcode4beer, on 10/12/2007, -0/+1Browster works for you. This script works for people who visit your site.
      Two different things completely
  • plasmatic, on 10/12/2007, -1/+1Wow, that's pretty neat but it's going to be abused.
  • masterofshadows, on 10/12/2007, -0/+1This sounds like something that would be ideal for a cacheing technology of a browser, not for the web page designers themselves
    • plasmatic, on 10/12/2007, -0/+0prefetching?
    • masterofshadows, on 10/12/2007, -0/+1yeah prefetch the page and render a tiny thumbnail of it
  • andrewthrice, on 10/12/2007, -0/+1Slightly off topic, but I've used this site to generate site thumbnails before - not sure what the terms are for using Alexa's service.

    http://www.thumbshots.com/
  • combustingboy, on 10/12/2007, -2/+1Followed the directions closely and it is not working correctly on IE6 PC

    How convenient they do not have any area to leave comments..
  • BigBlock, on 10/12/2007, -0/+0What I would like to know is how some folks black out "opac's" a background and add focus to a window. Like when you click reply on this site and it says this is a beta feature do you want to sign up. Anyone know how to do this?
  • Slashriffs, on 10/12/2007, -0/+3Guys theres a firefox extenstion that does this
    its called Cooliris Previews
    https://addons.mozilla.org/firefox/2207/

    • jaydee, on 10/12/2007, -0/+2just installed it and it seems really good.. thanks

      Oh and this actually fetches the content of the page so its realtime
  • JustAGamer, on 10/12/2007, -2/+1i use cooliris preview extention for firefox
  • sagelike, on 10/12/2007, -3/+0Check out a great article about this movie in this month's esquire.
  • falafelboy, on 10/12/2007, -0/+2Some have questionned the usefulness of this. I love it. It adds a little extra functionality to a site that, as a developer, is appreciated.

    If it's not abused, then the user experience will be improved slightly by this. Does not seem to slow down browsing time.
    • unknamed, on 10/12/2007, -3/+0I don't see the usefulness... when you can barely make out what the thumbnail is and it's not even a live snapshot. I can find out just as easily and almost as fast by actually clicking on the link (in a new tab in Firefox so I don't lose the orginal page also).

      A Firefox extension that scanned the page you were on for links and downloaded a live snapshot of the site linked to and put it in a legible sized thumbnail when you moused over MIGHT be cool...... but probably just annoying.
    • unknamed, on 10/12/2007, -2/+1I guess the firefox extension is a reality...... I should learn to read more before posting.
  • MrJiggs, on 10/12/2007, -1/+2Forgive me replying to my own post, but http://www.lipsum.com has a neat "Lorem Ipsum" generator for those who want to use it for testing their own sites, documents, etc.
  • spanner, on 10/12/2007, -2/+1Tried it, don't like it its too slow and the links have to be in alexa
  • phogasmic, on 10/12/2007, -0/+3I think it is a cool idea and script. Don't understand why so many people are hating on it. It would be cooler if it had a way to generate thumbnails itself. Anyone have any info on how this could be done?
    • willcode4beer, on 10/12/2007, -0/+1yes, see zoom1928's posting above
  • campingstick, on 10/12/2007, -0/+1Why do code example sites like this make you dig around to see the example? The code is front and center, but seeing it in action is kind of a scavenger hunt. Why is this? If someone says, "check out this cool effect" I want to see the effect first.
  • misteral, on 10/12/2007, -0/+1It would be interesting if this could be made into a Greasemonkey script. There's a cool GM script that does this, but only on the google results page: http://flet.ch/things/greasemonkey
  • zmigliozzi, on 10/12/2007, -0/+3that is sweet! it wins my vote for digg of the day.
  • bethanyb, on 10/12/2007, -0/+1Good idea, but seems like kinda of a lengthy process for such a, what seems to be, simple task.
  • searchfreak, on 10/12/2007, -2/+0Great job!!Its a nice idea, but i did not find thumbnails very useful, instead Try www.saarr.com for some hovering action
  • DKDiveDude, on 10/12/2007, -0/+1Anyone know about a perl or php script that can automaticaly generate screenshots in any size of a website / webpage?
  • onemillion, on 10/12/2007, -3/+1Maybe make somethings like this with that one website that made screen shots?
    ehhh...

    Just cause you gotta make those thumbnails.

    No digg.
  • duntuk, on 10/12/2007, -0/+1onemillion.. it automatically grabs the thumbs from alexa (which are already premade)
  • aNieto2k, on 10/12/2007, -0/+1Wordpress plugin
    http://www.anieto2k.com/2006/07/18/linkthumb-plugin-crea-miniaturas-de-la-direccion-de-tus-enlaces/
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.